canvas实现手写签名

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

---

写在前面

本文用vue和canvas实现手写签名。

代码块

代码说明

1. 创建一个canvas画布，并对canvas进行一些初始设置

<canvas id="Canvas" width="500" height="300"></canvas>

const canvas = document.getElementById("Canvas");
this.ctx = canvas.getContext("2d");

this.ctx.lineCap = "round"; // 设置线条结束样式
this.ctx.lineJoin = "round"; // 线条与线条接合处的样式

2. 变量说明：

• mouseArr：存储鼠标滑过的(x,y)
• isDraw：是否处于绘制过程中

3. 监听鼠标落下事件

鼠标落下说明开始绘制，此时设置isDraw为true，并且将绘制开始的(x,y)保存到mouseArr中作为起始点。

canvas.addEventListener("mousedown", (event) => {
  this.isDraw = true;
  // 绘制开始的x,y
  this.mouseArr.push({ x: event.offsetX, y: event.offsetY });
});

4. 监听鼠标移动事件

只有开始绘制后的鼠标移动的(x,y)才记录到mouseArr中，当mouseArr中有两个点及以上的点就可以开始绘制。

  canvas.addEventListener("mousemove", (event) => {
    if (this.isDraw) {
      // 绘制过程记录x,y
      this.mouseArr.push({ x: event.offsetX, y: event.offsetY });
      // 有两个点以上就可以开始绘制路径
      if (this.mouseArr.length >= 2) {
        this.drawPath();
      }
    }
  });

5. 绘制事件

每次绘制一小段，绘制一小段后删掉第一个点，接下来第二个点作为下次绘制的起点，以此重复绘制。

drawPath() {
  let point1 = this.mouseArr[0];
  let point2 = this.mouseArr[1];
  this.mouseArr.shift();
  this.ctx.moveTo(point1.x, point1.y); // 绘制开始位置
  this.ctx.lineTo(point2.x, point2.y); // 绘制结束位置
  this.ctx.stroke(); // 执行绘制
},

6. 监听鼠标松掉事件

鼠标松掉表示绘制结束，isDraw设置为false，此时再移动鼠标不再进行绘制，同时清空mouseArr。

  canvas.addEventListener("mouseup", (event) => {
    // 绘制结束
    this.isDraw = false;
    this.mouseArr = [];
  });

7. 重新绘制按钮

重设画布的长宽即可清空画布，通过clearRect下次绘制时会显示上次绘制的图形，怎么处理暂时没研究，所以用改变长宽的方式来清空画布，清空画布的同时清空mouseArr

<button @click="reDraw" class="btn">重新绘制</button>

reDraw() {
  this.mouseArr = [];
  // this.ctx.clearRect(0, 0, 500, 300);
  const canvas = document.getElementById("Canvas");
  canvas.width = 500;
  canvas.height = 300;
},

最后效果如下：

写在后面

以上就是所有的代码及说明。