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>
