JavaScript实现Canvas涂鸦笔功能详解

<canvas id="draw" width="800" height="800">
    
</canvas>

<style>
    html,body{
        margin:0;
    }
    canvas{
        border:1px solid black;
    }
</style>

const canvas = document.querySelector("#draw");

canvas.addEventListener("mousedown",(e)=>{
    
});

canvas.addEventListener("mouseup",(e)=>{

});

canvas.addEventListener("mouseover",(e)=>{

});

canvas.addEventListener("mouseleave",(e)=>{

});

let drawing = false;
let x = 0, y = 0 ;

canvas.addEventListener("mousedown",(e)=>{
    drawing = true;
    [x,y] = [e.offsetX,e.offsetY];//这个是为了让鼠标点下去之后，要记住点的位置-----记住鼠标开始的点，方便连成线
});

canvas.addEventListener("mouseup",(e)=>{
    drawing = false;
});

canvas.addEventListener("mouseover",(e)=>{
    //判断如果drawing为真，就返回值，console一下
    if(!drawing) return;
    console.log("draw");

});

canvas.addEventListener("mouseleave",(e)=>{
    drawing = false;
});

let colorDeg = 0; //为了实现使用hsl（hsl的颜色是角度取值的）的颜色取值
let lineWidth = 50; //画笔粗细的定义
let direction = 1; //方便变大变小，取反值用的

//让上面那些值，赋值给画布ctx的值上
let ctx = canvas.getContext("2d");
ctx.strokeStyle = `hsl(${colorDeg},100%,50%)`;//颜色的值
ctx.lineWidth = lineWidth;//线的粗细
ctx.lineCap = "round"; 
ctx.lineJoin = "round"; 


canvas.addEventListener("mouseover",(e)=>{
    //判断如果drawing为真，就返回值，console一下
    if(!drawing) return;
    console.log("draw");
    
    //颜色操作
    colorDeg = colorDeg < 360 ? colorDeg + 1 : 0 ;
    ctx.strokeStyle = `hsl(${colorDeg},100%,50%)`;
    
    //粗细的更改
    if(lineWidth < 1 || lineWidth > 50){
        direction =  direction * (-1);
    }

    lineWidth += direction;
    ctx.lineWidth = lineWidth;
    
});

ctx.beginPath();//新路径的起点。

ctx.moveTo(x,y);

ctx.lineTo(e.offsetX,e.offsetY);

[x,y] = [e.offsetX,e.offsetY];

ctx.stroke();//这是画出线的方法，没有这个方法，画不出线