js如何实现手写签名基于Canvas的手写签名实现-js教程-PHP中文网

js如何实现手写签名基于Canvas的手写签名实现

裘德小鎮的故事

发布： 2025-06-19 09:54:02

原创

727人浏览过

手写签名功能可通过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的手写签名实现

手写签名，听起来挺酷的，对吧？其实用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的偏移量，才能得到正确的坐标。

以上就是js如何实现手写签名基于Canvas的手写签名实现的详细内容，更多请关注php中文网其它相关文章！