-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path09-2d-taichi.html
116 lines (100 loc) · 2.84 KB
/
09-2d-taichi.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<title>太极图</title>
</head>
<body>
<canvas id="taichi" width="300" height="300" style="background-color: #1b6d85"></canvas>
<script>
var canvas = document.createElement('canvas')
document.body.insertBefore(canvas, document.body.firstChild)
canvas.width = 200
canvas.height = 200
canvas.style = 'background:#333;'
function getRads (deg) {
return Math.PI * deg / 180
}
// 太极图
function drawScreen (canvas) {
var context = canvas.getContext('2d')
context.save()
context.lineWidth = 2
var arc = {
x: canvas.width / 2,
y: canvas.height / 2,
r: canvas.width / 2 - context.lineWidth
}
var width = canvas.width
var height = canvas.height
var white = '#fff'
var black = '#000'
// 绘制白色半圆
context.beginPath()
context.fillStyle = white
context.arc(arc.x, arc.y, arc.r, getRads(-90), getRads(90), false)
context.fill()
// 绘制黑色半圆
context.beginPath()
context.fillStyle = black
context.arc(arc.x, arc.y, arc.r, getRads(-90), getRads(90), true)
context.fill()
// 绘制白色小圆
context.beginPath()
context.fillStyle = white
context.arc(arc.x, arc.y - arc.r / 2, arc.r / 2, getRads(-90), getRads(90), true)
context.fill()
// 绘制黑色小圆
context.beginPath()
context.fillStyle = black
context.arc(arc.x, arc.y + arc.r / 2, arc.r / 2, getRads(-90), getRads(90), false)
context.fill()
// 绘制小黑点
context.beginPath()
context.fillStyle = black
context.arc(arc.x, arc.y - arc.r / 2, arc.r / 10, getRads(0), getRads(360), true)
context.fill()
// 绘制小白点
context.beginPath()
context.fillStyle = white
context.arc(arc.x, arc.y + arc.r / 2, arc.r / 10, getRads(0), getRads(360), true)
context.fill()
}
drawScreen(canvas)
var tai = document.getElementById('taichi')
drawScreen(tai)
</script>
<div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
<input type="button" value="Run" id="run"/>
<script>
var ele = document.getElementById("test");
var progress = 0;
let myReq
let t1
function step() {
progress += 1;
ele.style.width = progress + "%";
ele.innerHTML = progress + "%";
// if (progress < 100) {
if(progress === 100) {
cancelAnimationFrame(myReq)
let t2 = performance.now()
console.log('t2-t1:', t2 - t1)
} else {
if (progress === 2) {
t1 = performance.now()
}
myReq = requestAnimationFrame(step);
}
// }
}
requestAnimationFrame(step);
document.getElementById("run").addEventListener("click", function() {
ele.style.width = "1px";
progress = 0;
requestAnimationFrame(step);
}, false);
</script>
</body>
</html>