JS-Canvas实现超简单画布(小白都能看懂）

实现思路

给canvas元素添加宽高，及背景色属性。
添加一个button元素，用于切换绘制和擦除功能。
分别给这两个元素添加鼠标事件监听，各自实现所需要的功能。在不同的鼠标事件中，实现不同的效果。

代码

1.CSS

<style>
canvas{
    background:"#eee";
}
</style>

2.HTML

//注意：canvas的宽高只能写在标签上，不能写在css样式中，
//html的属性值可以省略单位。
<canvas width="1200" height="600"></canvas>
<button>擦除</button>

3.JS

//获取canvas元素
var canvas = document.querySelector("canvas");
//canvas元素有一个getContext()的方法，这个方法是用来获得渲染上下文和它的绘画功能。
//此案例是对于2D图像而言，用法如下所示
var ctx = canvas.getContext("2d");
//获取button元素
var bn = document.querySelector("button");
//设置边线颜色
ctx.strokeStyle="red";
//设置一个bool值，值为true 代表擦除，值为false代表绘制，默认false
var bool=false;
//给画布添加一个鼠标按下的事件监听
canvas.addEventListener("mousedown",mouseHandler);
//给按钮添加一个鼠标点击的事件监听
bn.addEventListener("click",clickHandler);

function clickHandler(e){
//当按钮被点击时，为擦除功能，切换bool值和对应的按钮内容
bool = !bool;
if(bool){
    bn.textContent="绘制";
}else{
    bn.textContent="擦除";
}
}

function mouseHandler(e){
if(!bool){
//当bool为false时，执行绘制功能，否则擦除功能。
    drawLine(e);
}else{
    clearLine(e);
}
}

function clearLine(e){
if(e.type === "mousedown"){
    //设置一个清除矩形，左上角坐标为前面两个参数，
    //第三个参数是清除矩形的宽度，最后一个参数是清除矩形的高度，都是以像素为单位。
    //e.offsetX,e.offsetY 为当前鼠标按下的坐标
    ctx.clearRect(e.offsetX,e.offsetY,70,70);
    //添加两个事件监听
    canvas.addEventListener("mousemove",mouseHandler);
    canvas.addEventListener("mouseup",mouseHandler);
}else if(e.type === "mousemove"){
    ctx.clearRect(e.offsetX,e.offsetY,70,70);
}else if(e.type === "mouseup"){
    //鼠标抬起，清除监听功能
    canvas.removeEventListener("mousemove",mouseHandler);
    canvas.removeEventListener("mouseup",mouseHandler);
}
}

function drawLine(e){
if(e.type === "mousedown"){
    //起始一条路径，或者重绘当前路径
    ctx.beginPath();
    //起始点
    ctx.moveTo(e.offseeeetX,e.offsetY);
    canvas.addEventListener("mousemove",mouseHandler);
    canvas.addEventListener("mouseup",mouseHandler);
}else if(e.type === "mousemove"){
    //终点
    ctx.lineTo(e.offsetX,e.offsetY);
    //开始绘制
    ctx.stroke();
}else if(e.type === "mouseup"){
    canvas.removeEventListener("mousemove",mouseHandler);
    canvas.removeEventListener("mouseup",mouseHandler);
}
}

演示效果

image.png

最后编辑于：2020.09.19 23:59:14