手把手教你用JS实现超酷Canvas手写签名功能

想为你的网站或应用添加炫酷的手写签名功能吗？本文将手把手教你使用JS和Canvas轻松实现。通过监听鼠标或触摸事件，并利用Canvas的绘制功能，你可以创建交互式的签名体验。文章详细讲解了实现手写签名的核心步骤：从监听mousedown/touchstart事件开始绘制，使用moveTo和lineTo方法连接坐标点，到通过stroke方法描边路径，以及mouseup/touchend事件结束绘制。此外，还介绍了如何调整笔触样式（lineWidth和strokeStyle）、添加清空按钮（clearRect方法）以及通过toDataURL生成图片链接实现保存功能。更进一步，本文还探讨了如何使用requestAnimationFrame和贝塞尔曲线优化绘制体验，以及移动端触摸事件的处理和坐标转换，助你打造流畅自然的Canvas手写签名功能。

手写签名功能可通过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的内容清空。

清空

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的内容转换成图片，然后下载下来。

保存

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的偏移量，才能得到正确的坐标。

文中关于JavaScript,绘制,Canvas,触摸事件,手写签名的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《手把手教你用JS实现超酷Canvas手写签名功能》文章吧，也可关注golang学习网公众号了解相关技术文章。