用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();