-
Notifications
You must be signed in to change notification settings - Fork 1
/
animation4.html
96 lines (82 loc) · 2.33 KB
/
animation4.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<script type="text/javascript">
function spiral() {
var c = document.getElementById('c');
var context = c.getContext("2d");
var centerx = context.canvas.width / 2;
var centery = context.canvas.height / 2;
context.clearRect(0, 0, 400, 400);
var gradient_vertical = context.createLinearGradient(0,0,0,400);
gradient_vertical.addColorStop(0,'red');
gradient_vertical.addColorStop(1,'blue');
context.fillStyle=gradient_vertical;
context.moveTo(centerx, centery);
context.beginPath();
// for (i = 0; i < 720; i++) {
// angle = 0.2 * i;
// x = centerx + (a * angle) * Math.cos(angle);
// y = centery + (a * angle) * Math.sin(angle);
// context.arc(x, y,5,0,2*Math.PI,false);
// // context.fillStyle = "red";
// // document.write(x+'<br>'+y+'<br/>');
// }
var i=1;
var f=300;
function s() {
if(i<f) {
d = 0.3*i;
e = 0.2*i;
x = centerx + d * Math.cos(e);
y = centery + d * Math.sin(e);
context.arc(x, y,5,0,2*Math.PI,false);
i++;
context.fill();
}
else if(i==f) {
context.beginPath();
i++;//601
} else if(f>0) {
d = 0.3*f;
e = 0.2*f;
x = centerx + d * Math.cos(e);
y = centery + d * Math.sin(e);
context.arc(x, y,6,0,2*Math.PI,false);
f--;//0
context.fillStyle = "white";
context.fill();
} else {//
clearInterval(interval);
}
}
s = Math.sqrt(f);
function draw() {
if(i<f) {
r = Math.sqrt(i);
// d = r*(r/s)*10;
// e = 0.2*i;
t = 137.5*Math.PI/180*i;
console.log(t);
x = centerx + r*10 * Math.cos(t);
y = centery + r*10 * Math.sin(t);
context.arc(x, y,5,0,2*Math.PI,false);
i++;
context.fill();
} else {
clearInterval(interval);
}
}
var interval = window.setInterval(draw, 1);
}
window.onload = spiral;
</script>
</head>
<body>
<canvas id="c" width="400" height="400"></canvas>
</body>
</html>
<!-- http://jsfiddle.net/jingshaochen/xJc7M/ -->
<!-- http://stackoverflow.com/questions/6824391/how-to-draw-a-spiral-in-canvas -->