前端使用Canvas实现网页电子签名（撤销、下载）

前言：一般在一些后台的流程资料以及审核的场景中会需要电子签名，介绍一种用canvas实现的电子签名，此案例用的是原生js

效果展示：

 一、html和css：

      <div class="divCla2"><canvas id="myCanvas" width="600" height="400"></canvas><button class="clearBtn">撤销</button><button class="downBtn">下载</button></div>

.divCla2{border: 1px solid #817e7e;width: 600px;height: 400px;
}

二、js实现逐步分析：（如果着急实现功能可以直接下滑到三）

整个电子签名的流程无非就是按下鼠标、画线、松开鼠标、停止画线

1、需要定义三个值：是否按下、当前的x坐标和y坐标，鼠标按下的时候就开始画

//获取canvas
let canvas = document.getElementById("myCanvas");
// 状态status，用于标记开始和暂停
let status = false;
//xy坐标
let x = 0;
let y = 0;
// 鼠标按下的时候开始画
canvas.addEventListener("mousedown", (e) => {status = true;x = e.offsetX;y = e.offsetY;console.log(x, y, status);
});

2、鼠标松开时就改变status的值为false

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

3、鼠标移出画布时也一样：

canvas.addEventListener("mouseout", (e) => {status = false;
});

/4、鼠标移入并且status状态为true的时候就是可以画的

canvas.addEventListener("mousemove", () => {if (!status) return;
});

5、创建一个二维平面当做“笔”，并且加一些样式，比如描边颜色、拐角形状、线条末端形状、线条宽度等，然后绘制线条，可以看每一步的注释：

let ctx = canvas.getContext("2d"); // 建立二维平面
canvas.addEventListener("mousemove", (e) => {if (!status) return;//设置描边颜色ctx.strokeStyle = "#000";//拐角形状ctx.lineJoin = "round";//线条宽度ctx.lineWidth = 2;//末端形状ctx.lineCap = "round";//创建一条路径ctx.beginPath();//线条从哪里开始ctx.moveTo(x, y);//线条从哪里结束ctx.lineTo(e.offsetX, e.offsetY);//绘制路径ctx.stroke();//作为下次开始使用x = e.offsetX;y = e.offsetY;
});

 这样就已经可以绘制了

6、如果写错了，需要撤销功能，使用clearRect方法：

//撤销
const clearBtn = document.querySelector(".clearBtn");
clearBtn.addEventListener("click", () => {ctx.clearRect(0, 0, canvas.width, canvas.height);
});

7、 还要配合应用场景，有些时候需要将电子签名转化成图片，然后进行下载或者传给后端等，实现下载：

//下载
let downBtn=document.querySelector(".downBtn");
downBtn.addEventListener("click",()=>{let a = document.createElement("a");a.href = canvas.toDataURL("image/png");a.download = "canvas.png";a.click();
})

 

三、完整代码，可以直接复制使用：

let canvas = document.getElementById("myCanvas");let status = false;
let x = 0;
let y = 0;
canvas.addEventListener("mousedown", (e) => {status = true;x = e.offsetX;y = e.offsetY;console.log(x, y, status);
});
canvas.addEventListener("mouseup", () => {status = false;
});
canvas.addEventListener("mouseout", (e) => {status = false;
});
canvas.addEventListener("mousemove", () => {if (!status) return;
});
let ctx = canvas.getContext("2d"); // 建立二维平面
canvas.addEventListener("mousemove", (e) => {if (!status) return;ctx.strokeStyle = "#000";ctx.lineJoin = "round";ctx.lineWidth = 2;ctx.lineCap = "round";ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(e.offsetX, e.offsetY);ctx.stroke();x = e.offsetX;y = e.offsetY;
});
//撤销
const clearBtn = document.querySelector(".clearBtn");
clearBtn.addEventListener("click", () => {ctx.clearRect(0, 0, canvas.width, canvas.height);
});
//下载
let downBtn=document.querySelector(".downBtn");
downBtn.addEventListener("click",()=>{let a = document.createElement("a");a.href = canvas.toDataURL("image/png");a.download = "canvas.png";a.click();
})