canvas画的北斗七星和大熊座

用canvas画的北斗七星和大熊座，主要用到的知识点是：canvas、定时器。

html代码：

1 <body>
2     <canvas id="canvas" width="1250px" height="670px">
3         
4     </canvas>
5 
6 </body>

css代码：

1 body{
2     background-color:#0B0B0D;
3 }
4 
5 #canvas{
6     position: absolute;
7 }

js代码：

  1  function draw(obj,x,y,r,color,r1,r2){
  2 
  3        var str=obj.createRadialGradient(x,y,r1,x,y,r2);
  4       
  5         
  6 
  7       
  8        if(color){
  9 
 10               str.addColorStop(0,"white");
 11            str.addColorStop(1,color); 
 12         }
 13         else{
 14 
 15              str.addColorStop(0,"rgba(255,255,255,1)");
 16              str.addColorStop(1,"rgba(55,51,237,0.5)"); 
 17             
 18         }
 19 
 20          obj.beginPath();
 21        obj.fillStyle=str;
 22        obj.arc(x,y,r,0,Math.PI*2); 
 23        obj.fill();  
 24        obj.closePath();
 25 
 26   }
 27 
 28 
 29   function drawLine(obj,x1,y1,x2,y2,col,wid){
 30       
 31 
 32       obj.lineWidth = wid; 
 33       obj.beginPath();
 34       if(col){
 35            obj.strokeStyle = col;
 36       }
 37       else{
 38           obj.strokeStyle = "rgba(55,51,237,0.4)";
 39       }
 40      
 41       obj.moveTo(x1, y1);
 42       obj.lineTo(x2, y2);
 43       obj.stroke();
 44 }
 45 
 46 
 47 function color(){
 48    return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
 49 }
 50 
 51 
 52 function makeStar(){
 53     var c=document.getElementById("canvas");
 54 
 55     var ctx=c.getContext("2d");
 56     
 57     var a=[315,400,460,545,580,690,670];  //北斗七星的x坐标
 58     var b=[400,325,310,300,343,310,235];   //北斗七星的Y坐标
 59     var j=0;
 60     var i=0;
 61     var h=0;
 62     var m=0;
 63     var n=0;
 64     var count=0;
 65     var flag=1;
 66     var p=0;
 67    
 68     var c=[590,679,690,820,845,905,1000,825,835,840,970];
 69     var d=[420,615,460,500,340,365,420,275,215,165,240];
 70 
 71 
 72     var e=[580,590,679,590,690,820,690,590,845,905,1000,905,845,825,835,840,970,835,670,545];
 73     var f=[343,420,615,420,460,500,460,420,340,365,420,365,340,275,215,165,240,215,235,300];
 74    
 75     
 76     var g=[970,940,945,920,900,870,900,900,870/*耳朵*/,825,825,818,790,788,805,782,760,710,610,540,525/*尾巴*/,460,390,340,315,460,529,520,540,580,570,570,555,580,640,680,680,
 77            590,620,660,675,590,555,530,555,590,675,690,700,720,820,830,730,730,710,650,710,730,780,760,800,900,980,1000,920,980,980,900,895,885,870,870,950,900,970];
 78     var k=[240,190,173,148,135,128,112,135,128/*耳朵*/,135,155,130,120,148,165,157,157,188,245,288,300/*尾巴*/,300,315,335,400,335,325,390,460,502,540,570,590,627,640,630,610,
 79            580,550,520,480,470,430,370,430,470,480,490,520,530,500,470,470,420,398,380,398,420,405,370,410,395,430,400,360,390,360,335,355,320,305,270,270,245,240];
 80 
 81    var tout=setInterval(function(){
 82 
 83          var l=Math.ceil(Math.random()*1250); 
 84          var o=Math.ceil(Math.random()*700);
 85          count++;
 86 
 87          if(flag==1){   
 88               draw(ctx,l,o,1.5,color(),1,2);
 89               flag=2;
 90          }else if(flag==2){
 91                draw(ctx,l,o,1.5,null,1,1);
 92                flag=3;
 93          }else if(flag==3){
 94                 draw(ctx,l,o,1,color(),1,1);
 95                 flag=4;
 96          }
 97 
 98          else if(flag==4){
 99                 draw(ctx,l,o,2,color(),0.5,2.5);
100                 flag=1;
101          }
102         
103          if(count>=800){
104              clearInterval(tout);
105          }
106        
107    },10);
108 
109 
110 
111 var cont=setTimeout(function(){
112 
113      var g=ctx.createRadialGradient(700,400,150,700,400,1200);
114 
115          g.addColorStop(0,"black");
116          g.addColorStop(1,"white");
117 
118          ctx.beginPath();
119          ctx.fillStyle=g;
120          ctx.arc(700,400,300,0,Math.PI*2); 
121          ctx.fill();  
122       ctx.closePath();
123 
124  },8000);
125 
126 
127 
128 var start=setTimeout(function(){   
129     
130     var timer=setInterval(function(){   //画七颗星
131         draw(ctx,a[j],b[j],8,null,3,8);
132         j++;
133         if(j>6){
134             clearInterval(timer);
135         
136         }
137     },900);
138    
139 
140     var time=setInterval(function(){   //画七条线
141          drawLine(ctx,a[i],b[i],a[i+1],b[i+1],null,1);
142         i++;
143         if(i>5){
144             clearInterval(time);
145             
146         }
147 
148     },1100);
149      
150 
151 },9000);
152 
153  
154 var start=setTimeout(function(){
155 
156     var xiong=setInterval(function(){
157         draw(ctx,c[p],d[p],4,color(),2,4);
158         p++;
159         if(p>10){
160             clearInterval(xiong);
161         }
162 
163     },700);
164 
165 
166       var end=setInterval(function(){  
167              drawLine(ctx,e[h],f[h],e[h+1],f[h+1],"skyblue",1);
168             h++;
169             if(h>19){
170                 clearInterval(end);
171             }
172 
173         },800);
174 
175 },17000);
176 
177 
178 
179 var start=setTimeout(function(){
180     
181     var timer=setInterval(function(){   
182         draw(ctx,g[m],k[m],3,color(),2,4);
183         m++;
184         if(m>74){
185             clearInterval(timer);
186             console.log("ok1");
187         }
188     },200);
189    
190 
191     var time=setInterval(function(){   
192          drawLine(ctx,g[n],k[n],g[n+1],k[n+1],"rgba(255,255,255,0.8)",1);
193         n++;
194         if(n>74){
195             clearInterval(time);
196             console.log("ok");
197         }
198 
199     },220);
200 
201 
202  },34000);
203 
204   
205     
206 }
207 
208  makeStar();