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

posted on 2016-04-15 23:59  计划  阅读(1483)  评论(0编辑  收藏  举报