简单的实现签名板

一、代码

话不多说，直接上代码

<canvas id='cvs' width="1920" height="1080"></canvas>
<script>
// 通过id获取canvas标签
const cvs = document.getElementById('cvs');
// 获取Context对象（渲染实例）
const ctx = cvs.getContext('2d');
// 使用变量当开关
let isDrawing = false;
// 鼠标按下事件
cvs.addEventListener('mousedown', e => {
    isDrawing = true;
    // 定位到鼠标的位置
    ctx.moveTo(e.pageX, e.pageY);
});
//  鼠标移动事件
cvs.addEventListener('mousemove', e => {
    if(isDrawing) {
        // 进行绘画
        ctx.lineTo(e.pageX, e.pageY);
        // 渲染
        ctx.stroke();
    }
});
// 鼠标抬起事件
cvs.addEventListener('mouseup', e => {
    isDrawing = false;
});
</script>

二、效果