如何用HTML5 Canvas实现电子签名功能✍️

在这里插入图片描述

🤖 作者简介：水煮白菜王，一位前端劝退师 👻
👀 文章专栏：前端专栏，记录一下平时在博客写作中，总结出的一些开发技巧和知识归纳总结✍。
感谢支持💕💕💕

🖌️电子签名作为数字化转型的重要环节，在前端可通过HTML5 Canvas轻松实现。本文将以HTML De示例🎨，手把手带您完成一个电子签名功能。

一、实现原理与核心技术
二、核心代码实现解析
- 2.1 画布初始化
- 2.2 画笔样式配置
- 2.3 设备兼容处理
- 2.4 绘制逻辑实现
- - 起笔监听：
  - 移动绘制：
  - 收笔处理：
- 2.5 功能按钮实现
- - 清空画布：
  - 保存签名：
  - 可加撤销功能：
三、注意事项
四、完整代码示例

一、实现原理与核心技术

通过HTML5 Canvas的2D绘图上下文实现轨迹捕捉，结合事件监听处理完成核心绘制功能。关键技术点包括：

Canvas绘图API：Path路径操作
事件系统：鼠标/触摸事件统一处理
文件导出：Canvas转Blob对象

二、核心代码实现解析

2.1 画布初始化

设置600x300画布并获取2D上下文，建议根据屏幕尺寸动态调整画布大小。

const canvas = document.querySelector('canvas');
canvas.width = 500;
canvas.height = 300;
const ctx = canvas.getContext('2d');

2.2 画笔样式配置

通过lineCap和lineJoin实现自然的手写效果。

ctx.lineWidth = 3;
ctx.strokeStyle = 'red';
ctx.lineCap = 'round'; // 圆角线头
ctx.lineJoin = 'round'; // 圆角连接

2.3 设备兼容处理

通过UA检测自动切换触摸/鼠标事件，实际项目中建议使用pointer events实现更优雅的兼容。

const mobileStatus = /Mobile|Android|iPhone/i.test(navigator.userAgent);

2.4 绘制逻辑实现

起笔监听：

function start(event) {const pos = mobileStatus ? event.changedTouches[0] : event;ctx.beginPath();ctx.moveTo(pos.pageX, pos.pageY);window.addEventListener(mobileStatus ? 'touchmove' : 'mousemove', draw);
}

移动绘制：

function draw(event) {const pos = mobileStatus ? event.changedTouches[0] : event;ctx.lineTo(pos.pageX, pos.pageY);ctx.stroke(); // 实时渲染路径
}

收笔处理：

function closeDraw() {window.removeEventListener('mousemove', draw);
}

2.5 功能按钮实现

清空画布：

function cancel() {ctx.clearRect(0, 0, canvas.width, canvas.height);
}

保存签名：

function save() {canvas.toBlob(blob => {const a = document.createElement('a');a.download = `${Date.now()}.png`;a.href = URL.createObjectURL(blob);a.click();});
}

可加撤销功能：

let history = [];
// 绘制时保存状态
history.push(ctx.getImageData(0,0,canvas.width,canvas.height));function undo() {if(history.length > 1) {history.pop();ctx.putImageData(history[history.length-1], 0,0);}
}

三、注意事项

性能优化：大数据量绘制建议使用requestAnimationFrame
跨域问题：若涉及图片合成需设置crossOrigin=“anonymous”
移动端适配：添加CSS样式防止触摸滚动

canvas {touch-action: none;background: #f8f8f8;
}

四、完整代码示例

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0 auto;padding: 0;}button { padding: 3px 5px;margin: 5px; }</style></head><body><canvas id="sign"></canvas><div><button onclick="cancel()">取消</button><button onclick="save()">保存</button></div></body><script>const canvas = document.querySelector('canvas');canvas.width = 600;canvas.height = 300;canvas.style.borderRadius = '5px';canvas.style.border = '1px solid #a6a9ad';const ctx = canvas.getContext('2d');// 高清屏适配const scale = window.devicePixelRatio;canvas.width = 600 * scale;canvas.height = 300 * scale;ctx.scale(scale, scale);ctx.lineWidth = 3; //线宽ctx.strokeStyle = 'black'; //线颜色ctx.lineCap = 'round'; //线条的结束端点样式ctx.lineJoin = 'round'; //两条线相交时，所创建的拐角类型// 检测移动设备const mobileStatus = /Mobile|Android|iPhone/i.test(navigator.userAgent);const start = (event) => {const { offsetX, offsetY, pageX, pageY } = mobileStatus? event.changedTouches[0]: event;ctx.beginPath(); //起始一条路径，或重置当前路径ctx.moveTo(pageX, pageY); //把路径移动到画布中的指定点，不创建线条window.addEventListener(mobileStatus ? 'touchmove' : 'mousemove', draw);};const draw = (event) => {const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event;ctx.lineTo(pageX, pageY); //添加一个新点，然后在画布中创建从该点到最后指定点的线条ctx.stroke(); //绘制已定义的路径};const cloaseDraw = () => {window.removeEventListener('mousemove', draw);};window.addEventListener(mobileStatus ? 'touchstart' : 'mousedown', start);window.addEventListener(mobileStatus ? 'touchend' : 'mouseup', cloaseDraw);const cancel = () => {ctx.clearRect(0, 0, 600, 300); //在给定的矩形内清除指定的像素};const save = () => {canvas.toBlob((blob) => {const date = Date.now().toString();const a = document.createElement('a');a.download = `${date}.png`;a.href = URL.createObjectURL(blob);a.click();a.remove();});};</script>
</html>