canvas画板签名

要实现canvas画板签名，可以通过以下步骤：

1. 在HTML中创建一个canvas元素，并设置它的宽度和高度。
2. 获取canvas元素的上下文对象，使用getContext('2d')方法。
3. 监听鼠标事件，当鼠标按下时，在canvas上绘制一个起始点。
4. 当鼠标移动时，在canvas上绘制一条从起始点到当前点的线段。
5. 当鼠标松开时，停止绘制。

以下是一个简单的实现示例：

<canvas id="signature-canvas" width="400" height="200"></canvas>

const canvas = document.getElementById('signature-canvas');
const ctx = canvas.getContext('2d');

let isDrawing = false;
let lastX = 0;
let lastY = 0;

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  lastX = e.offsetX;
  lastY = e.offsetY;
});

canvas.addEventListener('mousemove', (e) => {
  if (isDrawing) {
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    lastX = e.offsetX;
    lastY = e.offsetY;
  }
});

canvas.addEventListener('mouseup', () => {
  isDrawing = false;
});