canvas画布实现手写签名效果的示例代码

以下是一个简单的使用canvas画布实现手写签名效果的示例代码：

HTML代码：

<canvas id="signature-canvas" width="400" height="200"></canvas>
<button id="clear-button">清除</button>

JavaScript代码：

const canvas = document.getElementById('signature-canvas');
const context = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;

// 监听鼠标按下事件
canvas.addEventListener('mousedown', (event) => {
  isDrawing = true;
  [lastX, lastY] = [event.offsetX, event.offsetY];
});

// 监听鼠标移动事件
canvas.addEventListener('mousemove', (event) => {
  if (isDrawing) {
    context.beginPath();
    context.moveTo(lastX, lastY);
    context.lineTo(event.offsetX, event.offsetY);
    context.stroke();
    [lastX, lastY] = [event.offsetX, event.offsetY];
  }
});

// 监听鼠标松开事件
canvas.addEventListener('mouseup', () => {
  isDrawing = false;
});

// 监听鼠标离开事件
canvas.addEventListener('mouseleave', () => {
  isDrawing = false;
});

// 监听清除按钮点击事件
const clearButton = document.getElementById('clear-button');
clearButton.addEventListener('click', () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
});

这个示例代码中，我们使用了canvas的2D绘图上下文对象（context），监听了鼠标的按下、移动、松开和离开事件，通过绘制连续的线条来实现手写签名效果。此外，我们还添加了一个清除按钮，用于清除画布上的内容。