圣诞将至：js加html5教你写出动态旋转圣诞树。

js与H5 canvas实现动态旋转圣诞树
效果图：

源代码

	<canvas id="c" height="356" width="446">
		<script>
			var collapsed = true;
			function toggle() {
				var fs = top.document.getElementsByTagName('frameset')[0];
				var f = fs.getElementsByTagName('frame');
				if (collapsed) {

					fs.rows = '250px,*';

					fs.noResize = false;

					f[0].noResize = false;

					f[1].noResize = false;

				}

				else {

					fs.rows = '30px,*';

					fs.noResize = true;

					f[0].noResize = true;

					f[1].noResize = true;

				}

				collapsed = !collapsed;

			}

		</script>

		<script>

			var b = document.body;

			var c = document.getElementsByTagName('canvas')[0];

			var a = c.getContext('2d');

			document.body.clientWidth;

		</script>

		<script>

			M = Math;

			Q = M.random; J = [];

			U = 16;

			T = M.sin;

			E = M.sqrt;

			for (O = k = 0; x = z = j = i = k < 200;)

				with (M[k] = k ? c.cloneNode(0) : c) {

					width = height = k ? 32 : W = 446;

					with (getContext('2d'))

					if (k > 10 | !k)

						for (

							font = '60px Impact',

							V = 'rgba('; I = i * U, fillStyle = k ? k == 13 ? V + '205,205,215,.15)' :

								V + (147 + I) + ',' + (k % 2 ? 128 + I : 0) + ',' + I + ',.5)' : '#cca', i < 7;)

							beginPath(fill(arc(U - i / 3, 24 - i / 2, k == 13 ? 4 - (i++) / 2 : 8 - i++, 0, M.PI * 2, 1)));

					else for (;

						x = T(i),

						y = Q() * 2 - 1,

						D = x * x + y * y,

						B = E(D - x / .9 - 1.5 * y + 1),

						R = 67 * (B + 1) * (L = k / 9 + .8) >> 1,

						i++ < W;

					)

						if (D < 1)

							beginPath(strokeStyle = V + R + ',' + (R + B * L >> 0) + ',40,.1)'),

								moveTo(U + x * 8, U + y * 8),

								lineTo(U + x * U, U + y * U),

								stroke();

					for (

						y = H = k + E(k++) * 25,

						R = Q() * W;

						P = 3, j < H;)

						J[O++] = [

							x += T(R) * P + Q() * 6 - 3, y += Q() * U - 8,

							z += T(R - 11) * P + Q() * 6 - 3,

							j / H * 20 + ((j += U) > H & Q() > .8 ? Q(P = 9) * 4 : 0) >> 1]

				}

			setInterval(function G(m, l) {

				A = T(D - 11);

				if (l)

					return (

						m[2] - l[2]) * A + (l[0] - m[0]) * T(D);

				a.clearRect(0, 0, W, W);

				J.sort(G);

				for (

					i = 0;

					L = J[i++];

					a.drawImage(M[L[3] + 1], 207 + L[0] * A + L[2] * T(D) >> 0, L[1] >> 1)) {

					if (i == 2e3)

						a.fillText

							('Happy Christmas!', U, 345);

					if (!(i % 7))

						a.drawImage(M[13],

							((157 * (i * i) + T(D * 5 + i * i) * 5) % W) >> 0,

							((113 * i + (D * i) / 60) % (290 + i / 99)) >> 0);

				}

				D += .02

			}, 1)

		</script>

  

 

  
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
  
127
  
128
  
129
  
130
  
131
  
132
  
133
  
134
  
135
  
136
  
137
  
138
  
139
  
140
  
141
  
142
  
143
  
144
  
145
  
146
  
147
  
148
  
149
  
150
  
151
  
152
  
153
  
154
  
155
  
156
  
157
  
158
  
159
  
160
  
161
  
162
  
163
  
164
  
165
  
166
  
167
 

文章来源: jiangwenxin.blog.csdn.net，作者：前端江太公，版权归原作者所有，如需转载，请联系作者。

原文链接：jiangwenxin.blog.csdn.net/article/details/122037347