电子签名（蓝桥杯）

1.思路

（1）开始绘制的时候打开绘画状态，通过getMousePos这个函数获得当前鼠标的位置。

复制代码

// 让屏幕坐标转化为画布内部坐标
    function getMousePos(canvasDom, event) {
        const rect = canvasDom.getBoundingClientRect();
        return {
            x: event.clientX - rect.left,
            y: event.clientY - rect.top
        };
    }

// 鼠标按下事件：开始绘制
    canvas.addEventListener("mousedown", (e) => {
        // TODO ：目标1 待补充代码
        // 处于绘画状态，记录起点坐标，
        isDrawing = true
        // 起始位置
        const pos = getMousePos(canvas,e)
        lastX = pos.x
        lastY = pos.y
    });

（2）（主要是鼠标移动事件）在mousemove中，如果绘画状态开启，就开始绘画的一系列操作：开始绘画，移动鼠标，连成线，描绘轮廓（根据题目已有的提示信息写就行）最后在进行一次获取当前鼠标位置，对其进行更新

复制代码

// 鼠标移动事件：进行绘制
    canvas.addEventListener("mousemove", (e) => {
        // TODO ：目标1 待补充代码
        // 连续取坐标，连成线
        if(isDrawing === true) {
            ctx.beginPath()
            ctx.moveTo(lastX, lastY)
            const pos = getMousePos(canvas,e)
            lastX = pos.x
            lastY = pos.y
            ctx.lineTo(lastX,lastY)
            ctx.stroke()
            lastX=getMousePos(canvas,e).x
            lastY=getMousePos(canvas,e).y
        }
    });

（3）后面两个简单，直接关闭绘画状态即可

复制代码

 // 鼠标抬起事件：停止绘制
    canvas.addEventListener("mouseup", () => {
        // TODO ：目标1 待补充代码
        // 关闭绘画状态，停止划线
        isDrawing = false


    });

    // 鼠标移出画布事件：停止绘制
    canvas.addEventListener("mouseleave", () => {
        // TODO ：目标1 待补充代码
        isDrawing = false
    });

（4）清除按钮就按照题目要求的ctx.clearRect(x, y, width, height) 找到html中画板的宽高即可。

复制代码

// 清除按钮点击事件
    clearBtn.addEventListener("click", () => {
        // TODO ：目标2 待补充代码
        // 清空整个画布
        ctx.clearRect(0, 0, 500, 300)
    });

（5）点击按钮保存事件也可以直接跟着题目的提示写就行，主要是不要忘了将获取到的图片路径赋值给一个常量，然后赋值给a.href,以及用a.click()模拟点击元素。

复制代码

// 保存按钮点击事件
    saveBtn.addEventListener("click", () => {
        // TODO ：目标3 待补充代码
        // 将内容转换为图片数据
        const url = canvas.toDataURL('image/png')
        const a = document.createElement('a')
        a.href = url
        // 文件名
        a.download = 'signture.png'
        a.click()
    });

2.难点

难点应该就是步骤二和步骤五，但是我发现多看看题目给的信息就还是挺简单的，多读题，然后还有一个是多次调用获取坐标的函数。