-
Notifications
You must be signed in to change notification settings - Fork 0
/
test-youdao.html
126 lines (118 loc) · 3.98 KB
/
test-youdao.html
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin: 0;">
<canvas id="canvas" width="600" height="600" style="border:solid black 1px;">
你的浏览器不支持 canvas 元素。
</canvas>
<br>
日志：<pre id="log" style="border: 1px solid #ccc;"></pre>
<script>
window.onload = function startup() {
const el = document.getElementsByTagName("canvas")[0];
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchend", handleEnd, false);
el.addEventListener("touchmove", handleMove, false);
console.log("初始化成功。")
}
var ongoingTouches = [];
function handleStart(evt) {
evt.preventDefault();
console.log("触摸开始。");
const el = document.getElementsByTagName("canvas")[0];
const ctx = el.getContext("2d");
const touches = evt.changedTouches;
for (let i = 0; i < touches.length; i++) {
console.log("开始第 " + i + " 个触摸 ...");
ongoingTouches.push(copyTouch(touches[i]));
const color = colorForTouch(touches[i]);
ctx.beginPath();
ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false);
// 在起点画一个圆。
ctx.fillStyle = color;
ctx.fill();
console.log("第 " + i + " 个触摸已开始。");
}
}
function handleMove(evt) {
evt.preventDefault();
const el = document.getElementsByTagName("canvas")[0];
const ctx = el.getContext("2d");
const touches = evt.changedTouches;
for (let i = 0; i < touches.length; i++) {
const color = colorForTouch(touches[i]);
const idx = ongoingTouchIndexById(touches[i].identifier);
if (idx >= 0) {
console.log("继续第 " + idx + "个触摸。");
ctx.beginPath();
console.log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");");
ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
console.log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");");
ctx.lineTo(touches[i].pageX, touches[i].pageY);
ctx.lineWidth = 4;
ctx.strokeStyle = color;
ctx.stroke();
ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // 切换触摸信息
console.log(".");
} else {
console.log("无法确定下一个触摸点。");
}
}
}
function handleEnd(evt) {
evt.preventDefault();
console.log("触摸结束。");
const el = document.getElementsByTagName("canvas")[0];
const ctx = el.getContext("2d");
touches = evt.changedTouches;
for (let i = 0; i < touches.length; i++) {
const color = colorForTouch(touches[i]);
const idx = ongoingTouchIndexById(touches[i].identifier);
if (idx >= 0) {
ctx.lineWidth = 4;
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
ctx.lineTo(touches[i].pageX, touches[i].pageY);
ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8);
// 在终点画一个正方形
ongoingTouches.splice(idx, 1); // 用完后移除
} else {
console.log("无法确定要结束哪个触摸点。");
}
}
}
function colorForTouch(touch) {
let r = touch.identifier % 16;
let g = Math.floor(touch.identifier / 3) % 16;
let b = Math.floor(touch.identifier / 7) % 16;
r = r.toString(16); // 转换为十六进制字符串
g = g.toString(16); // 转换为十六进制字符串
b = b.toString(16); // 转换为十六进制字符串
const color = "#" + r + g + b;
console.log("identifier " + touch.identifier + " 触摸的颜色为：" + color);
return color;
}
function copyTouch(touch) {
return {
identifier: touch.identifier,
pageX: touch.pageX,
pageY: touch.pageY
};
}
function ongoingTouchIndexById(idToFind) {
for (let i = 0; i < ongoingTouches.length; i++) {
const id = ongoingTouches[i].identifier;
if (id == idToFind) {
return i;
}
}
return -1; // 未找到
}
</script>
</body>
</html>