手写签名功能可通过js结合canvas实现，核心步骤为监听鼠标或触摸事件并绘制轨迹。具体包括：1. 监听mousedown/touchstart开始绘制，moveto记录起始点；2. 监听mousemove/touchmove持续绘制线条，使用lineto连接坐标点；3. stroke方法描边路径；4. mouseup/touchend结束绘制；5. 设置linewidth和strokestyle调整笔触样式；6. 添加清空按钮调用clearrect方法清除画布；7. 通过todataurl生成图片链接实现保存功能；8. 使用requestanimationframe和贝塞尔曲线优化绘制体验；9. 移动端需额外处理触摸事件及坐标转换。
手写签名，听起来挺酷的，对吧？其实用JS结合Canvas就能搞定，核心就是监听鼠标事件，然后在Canvas上绘制线条。别觉得难，一步一步来，你会发现其实挺有意思的。
Canvas手写签名，主要步骤就是：监听鼠标按下、移动、抬起事件，然后把鼠标移动的轨迹记录下来，在Canvas上画出来就行了。
如何在Canvas上绘制线条？
Canvas绘制线条，主要用到beginPath()、moveTo()、lineTo()、stroke()这几个方法。
- beginPath()：开始一个新的路径。
- moveTo(x, y)：将画笔移动到指定的坐标(x, y)。
- lineTo(x, y)：从当前画笔位置绘制一条直线到指定的坐标(x, y)。
- stroke()：使用当前的样式绘制路径。
所以，核心代码大概是这样：
const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
});
canvas.addEventListener('mousemove', (e) => {
if (!isDrawing) return;
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
});
canvas.addEventListener('mouseup', () => {
isDrawing = false;
});
canvas.addEventListener('mouseout', () => {
isDrawing = false;
});
这段代码就是监听鼠标事件，当鼠标按下时，开始绘制路径；鼠标移动时，绘制线条；鼠标抬起或移出Canvas时，停止绘制。 很简单吧？
如何调整笔触的粗细和颜色？
默认的线条太细，颜色也可能不太好看，可以调整ctx.lineWidth和ctx.strokeStyle属性。
比如，把线条调粗一点，颜色改成蓝色：
ctx.lineWidth = 5; ctx.strokeStyle = 'blue';
把这两行代码加到mousedown事件的处理函数里，每次开始绘制的时候，都会使用新的样式。
如何实现清空签名？
加一个清空按钮，点击按钮的时候，把Canvas的内容清空。
<button id="clearButton">清空</button>
const clearButton = document.getElementById('clearButton');
clearButton.addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
clearRect(0, 0, canvas.width, canvas.height)就是把Canvas的指定区域清空，这里清空的是整个Canvas。
如何保存签名？
保存签名，其实就是把Canvas的内容转换成图片，然后下载下来。
<button id="saveButton">保存</button>
const saveButton = document.getElementById('saveButton');
saveButton.addEventListener('click', () => {
const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = dataURL;
link.download = 'signature.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
canvas.toDataURL(‘image/png’)就是把Canvas的内容转换成PNG格式的Data URL，然后创建一个链接，设置链接的href为Data URL，设置链接的download属性为文件名，点击链接就可以下载图片了。
如何优化手写签名的体验？
手写签名，体验很重要。如果线条太僵硬，或者延迟太高，用户体验就会很差。
- 减少延迟： 可以使用requestAnimationFrame来优化绘制过程，减少延迟。
- 平滑线条： 可以使用贝塞尔曲线来平滑线条，让签名看起来更自然。
- 增加压力感应： 如果设备支持压力感应，可以根据压力的大小来调整线条的粗细，模拟真实的手写效果。
这些优化都需要更复杂的算法和代码，但如果想做出一个高质量的手写签名组件，这些都是值得考虑的。
移动端如何实现手写签名？
移动端和PC端的手写签名实现原理是一样的，只是事件类型不一样。PC端用的是mousedown、mousemove、mouseup，移动端用的是touchstart、touchmove、touchend。
所以，只需要把事件监听器改成触摸事件就可以了：
canvas.addEventListener('touchstart', (e) => {
isDrawing = true;
ctx.beginPath();
ctx.moveTo(e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop);
});
canvas.addEventListener('touchmove', (e) => {
if (!isDrawing) return;
ctx.lineTo(e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop);
ctx.stroke();
});
canvas.addEventListener('touchend', () => {
isDrawing = false;
});
注意，移动端的坐标需要减去Canvas的偏移量，才能得到正确的坐标。
暂无评论内容