用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();
时间： 2024-10-09 21:08:33