KonishiLee's Blog

使用 Canvas 做一个签名

背景

因为最近有同学问了我用 Canvas 签名的问题,所以我就在这里统一讲诉一下。顺便也写了一个小的 Demo。

手机端的签名

1.首先定义一个 Canvas 的对象。

1
<canvas id="canvas" width="800" height="700"></canvas>

2.给 Canvas 对象添加事件监听

  • 1.touchstart
  • 2.touchmove
  • 3.touchend

定义参数

1
2
3
4
var color = 'black'; //定义画笔颜色
var ongoingTouches = new Array(); //定义 touch move 中所有点集合
var el = document.getElementById("canvas"); //定义画布
var ctx = el.getContext("2d");

事件监听

1.touchstart

1
2
3
4
5
6
7
8
9
10
11
el.addEventListener("touchstart", (evt) => {
evt.preventDefault();
var touches = evt.changedTouches;
for (var i = 0; i < touches.length; i++) {
ongoingTouches.push(touches[i]);
ctx.arc(touches[i].pageX, touches[i].pageY, 1, 0, 2 * Math.PI, false);
var color = colorForTouch(touches[i]);
ctx.fillStyle = color;
ctx.fill();
}
});

2.touchmove

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
el.addEventListener("touchmove", (evt) => {
evt.preventDefault();
var touches = evt.changedTouches;
ctx.lineWidth = 4;
for (var i = 0; i < touches.length; i++) {
var idx = ongoingTouchIndexById(touches[i].identifier);
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
ctx.lineTo(touches[i].pageX, touches[i].pageY);
ctx.closePath();
ctx.stroke();
ongoingTouches.splice(idx, 1, touches[i]);
}
});

3.touchend

1
2
3
4
5
6
7
8
9
10
11
el.addEventListener("touchend", (evt) => {
evt.preventDefault();
var touches = evt.changedTouches;
ctx.lineWidth = 4;
for (var i = 0; i < touches.length; i++) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.lineTo(touches[i].pageX, touches[i].pageY);
ongoingTouches.splice(i, 1);
}
});

其余方法

1
2
3
4
5
6
7
8
9
10
function ongoingTouchIndexById(idToFind) {
for (var i = 0; i < ongoingTouches.length; i++) {
var id = ongoingTouches[i].identifier;
if (id == idToFind) {
return i;
}
}
return -1;
}

总结

根据上面的代码来制作的网页版签名就简易的完成了,大家可以按照方法自己制作,有问题可以联系我。

如果喜欢这个分享,就帮忙买杯咖啡吧