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

时间：2022-08-25 12:22:38

html

[html] view plain copy H5使用canvas实现星星闪烁效果H5使用canvas实现星星闪烁效果
  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>  
JS

main.js

[javascript] view plain copy H5使用canvas实现星星闪烁效果H5使用canvas实现星星闪烁效果
  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 H5使用canvas实现星星闪烁效果H5使用canvas实现星星闪烁效果
  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 H5使用canvas实现星星闪烁效果H5使用canvas实现星星闪烁效果
  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.         }  
 效果图

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

素材图片

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

2

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

标签：

相关文章