利用Canvas实现手写板的插件1--touch事件与Canvas的基本使用

  |  

前言

为了那个密码学的项目,先做一些前期的学习准备。今天先学习一下移动端的touch事件和canvas的基本绘图


22



实现原理

touch事件

通过分析人手写的过程,可以大致分成三部,这三部对应着移动端的三个事件:

  • 触碰:touchstart,该方法在手指触摸到屏幕时触发
  • 移动:touchmove,该方法在手指在屏幕上滑动时触发
  • 离开:touchend,该方法在手指离开屏幕时触发

下面通过一个Jquery实例来简单的描述三个方法的具体功能和使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<html>
<head>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<body>
<div class="container"></div>
</body>
<script type="text/javascript">
let innerHtml = "";
let startTime = ""
function insertEle() {
$(this).html(innerHtml);
}
$(".container").on("touchstart", function(e) {
console.log(e);
if(!startTime) {
startTime = e.timeStamp;
}
time = e.timeStamp - startTime;
let y = e.originalEvent.changedTouches[0].clientY;
let x = e.originalEvent.changedTouches[0].clientX ;
innerHtml = '<div class="box" style="top: ' + y + 'px;left: ' + x + 'px"></div>'
insertEle.call(this);
let offset = $('.box').offset();
console.log(offset, time);
});

$(".container").on("touchmove", function(e) {
let y = e.originalEvent.changedTouches[0].clientY;
let x = e.originalEvent.changedTouches[0].clientX;
time = e.timeStamp - startTime;
innerHtml = '<div class="box" style="top: ' + y + 'px;left: ' + x + 'px"></div>'
insertEle.call(this);
let offset = $('.box').offset();
console.log(offset, time)
});

$(".container").on("touchend", function(e) {
innerHtml = "";
insertEle.call(this);
});
</script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
width: 700px;
height: 700px;
top: 50px;
left: 50px;
background: #000;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
}
</style>
</html>

我们为touchstarttouchmove方法分别绑定了一个函数。函数的功能是获得点击事件e的client坐标,并在坐标点处生成一个白色小圆。并且在第一次触摸时,记录时间戳,并在之后记录每次事件触发时相对于起始时间的间隔时间。获得小圆的offset左边,并结合事件输出。

touchend事件清理所有添加的内容。

canvas绘图原理

canvas绘图首先须在html中添加canvas标签, 并确定其宽高属性,确定画布的大小。接下来就是使用一些常用方法进行绘制:

  • getContext('2d'):获取一个context 2d对象,即渲染上下文,其中包含了很多画图的相关方法,对应的还有3d对象
  • beginPath(): 开始绘制路径
  • lineto():设置线条移动到的终点
  • moveto():移动绘制点到指定坐标
  • stroke():线条着色
  • closePath():结束绘制
  • clearRect(x1, y1, x2, y2):以左上与右下坐标点为范围清空内容
  • toDataURL():将canvas数据重新转换成图片文件
  • 线条相关属性:
    • strokeStyle:线条颜色
    • lineWidth:线条宽度
    • lineCap:线条结束线帽:butt默认值,平直边缘;round圆形线帽;square正方形线帽
    • lineJoin:线条转弯处线帽,值同上

实例:在Canvas画布的左上角和右上角绘制两个正方形,一个不使用一个使用线帽:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<body>
<canvas id="canvas" width="500" height="500">
</canvas>
</body>
</html>
<script type="text/javascript">
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(110, 10);
ctx.lineTo(110, 110);
ctx.lineTo(10, 110);
//有宽度的线条的坐标以其中心点为基点,所以需要减去其宽度的一半来闭合线条
ctx.lineTo(10, 5);
ctx.lineWidth = 10;
ctx.strokeStype = "#000"
ctx.stroke();
ctx.closePath();
console.log(canvas.toDataURL());
ctx.beginPath();
ctx.moveTo(300, 10);
ctx.lineTo(400, 10);
ctx.lineTo(400, 110);
ctx.lineTo(300, 110);
ctx.lineTo(300, 10);
ctx.lineWidth = 10;
ctx.strokeStype = "#000";
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.stroke();
ctx.closePath();
console.log(canvas.toDataURL());
</script>
<style>
#canvas {
background: #ccc;
border-radius: 10px;
}
</style>
文章目录
  1. 1. 实现原理
    1. 1.1. touch事件
    2. 1.2. canvas绘图原理