简易画板效果 canvas

 

<canvas id="canvas" width="600" height="600"></canvas>
<script>
    let canvas=document.getElementById('canvas')
        //获取canvas上下文对象
    var ctx=canvas.getContext('2d')//2d：图象 
    ctx.lineWidth=3;//设置线宽
    ctx.strokeStyle='purple'//设置线的颜色
    var flag=false;
    //监听鼠标按下的时候执行重新绘制
    canvas.onmousedown=function(e){
        flag=true;
        ctx.beginPath();
    }
    //鼠标移入绘图
    canvas.onmousemove=function(e){
        if(!flag)return;
        ctx.lineTo(e.clientX,e.clientY)//画点 clientX,clientY获取鼠标所在位置的x，y轴坐标
        ctx.stroke();//绘制线条
    }
    //鼠标松开停止绘图
    canvas.onmouseup=function(e){
        flag=false; 
    }
</script>