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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>画板</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background: #ccc;
}
canvas {
background: #fff;
margin: 50px 10px;
}
</style>
</head>
<body>
<div style="text-align: center">
<canvas height="600" width="900" id="canvas">
<span>亲，您的浏览器不支持canvas，换个浏览器试试吧！</span>
</canvas>
</div>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
let flag = true;
ctx.lineWidth = 6.0;
canvas.addEventListener('touchstart', (e) => {
console.log("开始触摸！")
let touch = e.targetTouches[0];
let screen_x = e.targetTouches[0].clientX;
let screen_y = e.targetTouches[0].clientY
console.log(e)
ctx.beginPath();
ctx.moveTo(touch.clientX - canvas.offsetLeft, touch.clientY - canvas.offsetTop);
canvas.addEventListener('touchmove', (e) => {
console.log("开始移动")
console.log(e)
if (e.targetTouches.length === 1) {
let touch = e.targetTouches[0];
ctx.lineTo(touch.clientX - canvas.offsetLeft, touch.clientY - canvas
.offsetTop);
ctx.stroke();
}
}, false)
canvas.addEventListener('touchend', (e) => {
ctx.closePath();
console.log("我没了")
}, false)
}, false)
canvas.addEventListener("mousedown", (e) => {
console.log("鼠标点击啦！")
console.log(e)
flag = false;
ctx.beginPath();
ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}, false)
canvas.addEventListener("mousemove", (e) => {
if (flag) {
return false;
}
console.log("我动啦")
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
ctx.stroke();
}, true)
canvas.addEventListener("mouseup", (e) => {
console.log("我没了")
flag = true;
e.stopPropagation();
ctx.closePath();
}, false)
}
</script>
</body>
</html>
|
