zoukankan      html  css  js  c++  java
  • 伙伴们休息啦canvas绘图夜空小屋

    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

  • 相关阅读:
    topcoder srm 445 div1
    topcoder srm 440 div1
    topcoder srm 435 div1
    topcoder srm 430 div1
    topcoder srm 400 div1
    topcoder srm 380 div1
    topcoder srm 370 div1
    topcoder srm 425 div1
    WKWebView强大的新特性
    Runtime那些事
  • 原文地址:https://www.cnblogs.com/jihua/p/canvasyekong.html
Copyright © 2011-2022 走看看