js实现手动签名

创建画布

let canvas=document.createElement("canvas")

将canvas的宽高设置和浏览器一样

 canvas.width=window.innerWidth;
 canvas.height=window.innerHeight;

添加到页面

 document.body.append(canvas)

平面画布

 let context=canvas.getContext("2d")

监听起点

 canvas.addEventListener("mousedown",function(e){
            // 记录按下的状态
            this.isMouseDown=true;
            // 画笔起点为按下的位置
            context.moveTo(e.pageX,e.pageY)
        })

监听移动

canvas.addEventListener("mousemove",function(e){
            if (this.isMouseDown) {
                // 只有鼠标按下才绘画
                context.lineTo(e.pageX,e.pageY)
                context.stroke()
            }
        })

监听停止

canvas.addEventListener("mouseup",function(e){
            this.isMouseDown=false;
        })

保存图片

 // 保存图片
        canvas.addEventListener("dblclick",function(){
            let link=document.createElement("a");
            // canvas.toDataURL 将canvas对象转换为base64位编码
            link.href=canvas.toDataURL("image/png");
            link.download="draw.png"
            link.click()
        })

完整代码