H5使用canvas实现星星闪烁效果

清疚 2021-09-11 06:12 907阅读 0赞

html

**\[html\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <!DOCTYPE html**>**  
2.  **<****html****>**  
3.      **<****head****>**  
4.          **<****meta** charset="utf-8" **/>**  
5.          **<****title****>**star**</****title****>**  
6.      **</****head****>**  
7.      **<****body****>**  
8.          **<****div****>**  
9.              **<****canvas** id="canvas" width = "800" height="600"**>****</****canvas****>**  
10.         **</****div****>**  
11.         **<****script** src="js/main.js"**>****</****script****>**  
12.         **<****script** type="text/javascript" src="js/commonFunctions.js" **>****</****script****>**  
13.         **<****script** type="text/javascript" src="js/starts.js" **>****</****script****>**  
14.     **</****body****>**  
15. **</****html****>**

main.js

**\[javascript\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **var** can;  
2.  **var** ctx;  
3.  **var** w,h;  
4.  **var** girlPic = **new** Image();  
5.  **var** starPic = **new** Image();  
6.  **var** num = 60;  
7.  **var** stars  = \[\];  
8.  **var** lastTime,deltaTime;  
9.  **var** switchy;  
10. **var** life = 0;  
11. **function** init()\{  
12.     can  = document.getElementById("canvas");  
13.     ctx = can.getContext("2d");  
14.     w = can.width;  
15.     h = can.height;  
16.     document.addEventListener("mousemove",mousemove,**false**);  
17.     girlPic.src = "img/girl.jpg";  
18.     starPic.src = "img/star.png";  
19.       
20.     **for**(**var** i=0;i<num;i++)\{  
21.         **var** obj = **new** starObj();  
22.         stars.push(obj);  
23.         stars\[i\].init();  
24.           
25.     \}  
26.     lastTime = Date.now();  
27.     gameloop();  
28.       
29. \}  
30. document.body.onload = init;  
31. **function** gameloop()\{  
32.       
33.     window.requestAnimationFrame(gameloop);  
34.     **var** now = Date.now();  
35.     deltaTime = now - lastTime;  
36.     lastTime = now;  
37.     drawBackground();  
38.     drawGril();  
39.     drawStars();  
40.     aliveUpdate();  
41.       
42. \}  
43. **function** drawBackground()\{  
44.     ctx.fillStyle ="\#393550";  
45.     ctx.fillRect(0,0,w,h);  
46.       
47. \}  
48. **function** drawGril()\{  
49.     //drawImage(img,x,y,width,height)  
50.     ctx.drawImage(girlPic,100,150,600,300);  
51.       
52. \}  
53. **function**  mousemove(e)\{  
54.       
55.     **if**(e.offsetX||e.layerX)\{  
56.         **var** px = e.offsetX == undefined?e.layerX:e.offsetX;  
57.         **var** py = e.offsetY == undefined?e.layerY:e.offsetY;  
58.         //判断px py在范围内  
59.         **if**(px>100&&px<700&&py>150&&py<450)\{  
60.             switchy =**true**;  
61.               
62.         \}  
63.         **else**\{  
64.             switchy =**false**;  
65.         \}  
66. //      console.log(switchy);  
67.     \}  
68. \}

commonFunctions.js

**\[javascript\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  window.requestAnimFrame = (**function**() \{  
2.      **return** window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||  
3.          **function**( /\* function FrameRequestCallback \*/ callback, /\* DOMElement Element \*/ element) \{  
4.              **return** window.setTimeout(callback, 1000 / 60);  
5.          \};  
6.  \})();

stars.js

**\[javascript\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **var** starObj = **function**()\{  
2.        
3.      **this**.x;  
4.      **this**.y;  
5.      **this**.picNo;  
6.      **this**.timer;  
7.      **this**.xSpd;  
8.      **this**.ySpd;  
9.  \}  
10. starObj.prototype.init = **function**()\{  
11.     **this**.x = Math.random()\*600+100;  
12.     **this**.y = Math.random()\*300+150;  
13.       
14.     **this**.picNo =Math.floor(Math.random()\*7);  
15.     **this**.timer = 0;  
16.       
17.     **this**.xSpd = Math.random()\*3-1.5;  
18.     **this**.ySpd = Math.random()\*3-1.5;  
19. \}  
20. starObj.prototype.update = **function**()\{  
21.       
22.     **this**.x += **this**.xSpd\*deltaTime\*0.01;  
23.     **this**.y += **this**.ySpd\*deltaTime\*0.01;  
24.     //this.x 超过范围  
25.     **if**(**this**.x<100||**this**.x>693)\{  
26.         **this**.init();  
27.         **return**;  
28.     \}  
29.     //this.y超出范围 重生  
30.     **if**(**this**.y<150||**this**.y>443)\{  
31.         **this**.init();  
32.         **return**;  
33.     \}  
34.     **this**.timer +=deltaTime;  
35.     **if**(**this**.timer>60)\{  
36.         **this**.picNo += 1;  
37.         **this**.picNo %= 7;  
38.         **this**.timer = 0;  
39.     \}  
40.       
41.   
42. \}  
43. starObj.prototype.draw = **function**()\{  
44.       
45.     // save()  
46.     ctx.save();  
47.       
48.     //globalAlpha 全局透明度  
49.     ctx.globalAlpha = life;  
50.     //drawImage(img,sx,sy,swidth,sheight,x,y,width,height);  
51.     ctx.drawImage(starPic,**this**.picNo\*7,0,7,7,**this**.x,**this**.y,7,7);  
52.     //restore()  
53.       
54.     ctx.restore();  
55. \}  
56. **function** drawStars()\{  
57.     **for**(**var** i = 0;i<num;i++)\{  
58.         stars\[i\].update();  
59.         stars\[i\].draw();  
60.     \}  
61.       
62. \}  
63. **function** aliveUpdate()\{  
64.     **if**(switchy)\{  //in area  
65.         //show stars  
66.         life +=0.3\*deltaTime\*0.05;  
67.         **if**(life>1)\{  
68.             life = 1;  
69.         \}  
70.           
71.     \}**else**\{   //out area  
72.         //hide stars  
73.         life -=0.3\*deltaTime\*0.05;  
74.         **if**(life<0)\{  
75.             life=0;  
76.         \}

效果图

![20160812191049245][]

素材图片

1![20160812191853502][]

![20160812191906518][]

[view plain]: http://blog.csdn.net/u014041540/article/details/52194544#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/1826545
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/1826545/fork
[20160812191049245]: /images/20210527/d52e9ef45ea64a47bab59cdbe5141569.png
[20160812191853502]: /images/20210527/6239579a4e94452d9174b3c69cfb6534.png
[20160812191906518]: /images/20210527/4ca3d6f11fe14a0d8c214cc69291fdb1.png