HTML5 canvas绘图夜空小屋
伙伴们园友们，夜深了，休息啦，好人好梦...
查看效果：http://hovertree.com/texiao/html5/28/
效果图如下：
代码如下：
1 <!doctype html>
2 <html>
3 <head><meta name="viewport" content="width=device-width, initial-scale=1" />
4 <title>HTML5 Canvas绘制恬静夜景? - 何问起</title><base target="_blank" />
5 <meta charset="utf-8">
6 <style>*{margin:0px;padding:0px;}body{text-align:center;}a{color:#333333;}</style>
7 </head>
8
9 <body>
10 <div><h2>何问起：程序媛，攻城狮，入夜了，睡觉啦......</h2>
11 </div>
12 <canvas id="hovertreecanvas" style="display:block;margin:0px auto;border:1px solid #aaa;">
13 何问起提醒：此浏览器不支持canvas，请更换浏览器
14 </canvas>
15 <div><a href="http://hovertree.com/h/bjaf/umtdyo4d.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a></div>
16
17 <script>
18
19
20 hovertreenight(); setInterval(hovertreenight, 4000);
21
22
23 function hovertreenight () {
24 canvas = document.getElementById(‘hove‘+‘rtreecanvas‘);
25 canvas.width=1000;
26 canvas.height=560;
27 context=canvas.getContext(‘2d‘);
28
29 drawing(context);
30 drawing_start_1(context);
31 drawing2(context);
32
33
34 go();
35 draw_moon(context);
36 draw_moon2(context);
37 draw_moon3(context);
38 }
39
40 function go(){
41
42 for(var i=0;i<100;i++){
43 var r=Math.random()*10+3;
44 var x=Math.random()*1000;
45 var y=Math.random()*300;
46 var a=Math.random()*360;
47 drawing_start_2(context,x,y,r,r/2.0,a);
48
49 }
50
51 }
52
53
54
55
56 function draw(cxt){
57 cxt.beginPath();
58 for(i=0;i<56;i++){
59 cxt.moveTo(0,i*20);
60 cxt.lineTo(1000,i*20);
61 cxt.stroke();
62 }
63 }
64
65 function draw2(cxt){
66 cxt.beginPath();
67 for(i=0;i<56;i++){
68 cxt.moveTo(i*20,0);
69 cxt.lineTo(i*20,560);
70 cxt.stroke();
71 }
72 }
73
74 function drawing(cxt){ //画整体背景颜色渐变
75 var linearGrad=cxt.createLinearGradient(500,0,500,540);
76 linearGrad.addColorStop(0.0,‘black‘);
77 linearGrad.addColorStop(1.0,‘blue‘);
78 cxt.fillStyle=linearGrad;
79 cxt.fillRect(0,0,1000,540);
80 cxt.fill();
81 }
82
83 function drawing2(cxt){ //画房子
84 cxt.beginPath();
85 cxt.moveTo(0,540);
86 cxt.lineTo(1000,540);
87 cxt.lineTo(1000,560);
88 cxt.lineTo(0,560);
89 cxt.closePath();
90 cxt.fillStyle="black";
91 cxt.fill();
92 cxt.stroke();
93
94 cxt.beginPath();
95 cxt.moveTo(200,540);
96 cxt.lineTo(360,540);
97 cxt.lineTo(360,480);
98 cxt.lineTo(200,480);
99 cxt.closePath();
100 cxt.fillStyle="black";
101 cxt.fill();
102 cxt.stroke();
103
104
105 cxt.beginPath();
106 cxt.moveTo(120,480);
107 cxt.lineTo(280,420);
108 cxt.lineTo(440,480);
109 cxt.closePath();
110 cxt.fillStyle="black";
111 cxt.fill();
112 cxt.stroke();
113
114 cxt.beginPath();
115 cxt.moveTo(320,435);
116 cxt.lineTo(320,420);
117 cxt.lineTo(340,420);
118 cxt.lineTo(340,442);
119 cxt.closePath();
120 cxt.fillStyle="black";
121 cxt.fill();
122 cxt.stroke();
123
124 cxt.beginPath();
125 cxt.moveTo(240,520);
126 cxt.lineTo(260,520);
127 cxt.lineTo(260,500);
128 cxt.lineTo(240,500);
129 cxt.closePath();
130 cxt.fillStyle="yellow";
131 cxt.fill();
132 cxt.stroke();
133
134 cxt.beginPath();
135 cxt.moveTo(240,510);
136 cxt.lineTo(260,510);
137 cxt.moveTo(250,500);
138 cxt.lineTo(250,520);
139 cxt.closePath();
140 cxt.stroke();
141 }
142
143 function drawing_start_1(cxt){ //星星背景
144 cxt.beginPath();
145 cxt.rect(0,0,1000,550);
146 cxt.closePath();
147
148 cxt.stroke();
149 }
150
151 function drawing_start_2(cxt,x,y,outerR,innerR,rot){ //画星星 何问起
152
153 cxt.beginPath();
154 for(var i=0;i<5;i++){
155 cxt.lineTo((Math.cos(18+i*72-rot)/180*Math.PI)*outerR+x,
156 -Math.sin((18+i*72-rot)/180*Math*outerR+y));
157
158 cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*innerR+x,
159 -Math.sin((54+i*72-rot)/180*Math.PI)*innerR+y);
160 }
161 cxt.fillStyle="#cf3"
162 cxt.fill();
163 cxt.closePath();
164 cxt.stroke();
165 }
166
167 function draw_moon(cxt){ //画月亮 hovertree.com
168 cxt.beginPath();
169 cxt.arc(200, 200, 100, 0.6 * Math.PI, 1.3 * Math.PI);
170 cxt.bezierCurveTo(140, 119, 93, 224, 169, 295);
171 cxt.fillStyle="#ddd";
172 cxt.fill();
173 cxt.stroke();
174 }
175
176 function draw_moon2(cxt){ //月亮的眼睛。。。
177 cxt.beginPath();
178 cxt.moveTo(110,180);
179 cxt.lineTo(115,180);
180 cxt.stroke();
181 }
182
183 function draw_moon3(cxt){ //zzz...
184 cxt.beginPath();
185 cxt.moveTo(40,80);
186 cxt.lineTo(60,80);
187 cxt.lineTo(40,100);
188 cxt.lineTo(60,100);
189 cxt.strokeStyle="yellow"
190 cxt.stroke();
191
192
193 cxt.beginPath();
194 cxt.moveTo(63,108);
195 cxt.lineTo(80,108);
196 cxt.lineTo(63,123);
197 cxt.lineTo(80,123);
198 cxt.strokeStyle="yellow"
199 cxt.stroke();
200
201 cxt.beginPath();
202 cxt.moveTo(86,130);
203 cxt.lineTo(100,130);
204 cxt.lineTo(86,142);
205 cxt.lineTo(100,142);
206 cxt.strokeStyle="yellow"
207 cxt.stroke();
208 }
209 // http://www.cnblogs.com/jihua/p/webfront.html
210 </script>
211
212 </body>
213 </html>
转自：http://hovertree.com/h/bjaf/umtdyo4d.htm
更多特效：http://www.cnblogs.com/jihua/p/webfront.html
时间： 2024-10-26 00:50:54