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.com168 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.html210 </script>211 212 </body>213 </html>