canvas实现闪亮的星星
之前网上看到一个一闪一闪星星的教程,觉得挺有意思的,于是按照效果自己做了一下。
实现效果:鼠标移动上去出现星星闪动,移开星星消失
源代码:
commonFunctions.js
window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback,element){ return window.setTimeout(callback,1000/60); }; })();
main.js
var can; var ctx; var w; var h; var girlPic = new Image(); var starPic = new Image(); var num = 60; var stars = []; var lastTime; var deltaTime; var switchy =false; var life = 0; //初始化 function init(){ can = document.getElementById('canvas'); ctx = can.getContext('2d'); w =can.width; h = can.height; girlPic.src = 'src/girl.jpg'; starPic.src = 'src/star.png'; for(var i = 0;i<num; i++){ var obj = new starObj(); stars.push(obj); stars[i].init(); } lastTime = Date.now(); gameloop(); document.addEventListener('mousemove',mousemove,false); } document.body.onload = init; function gameloop(){ window.requestAnimationFrame(gameloop);//;两针之间的时间间隔不相等 var now = Date.now(); deltaTime = now - lastTime; lastTime = now; drawBackground(); drawPic(); drawStars(); aliveUpdate(); } //画布的颜色 function drawBackground(){ ctx.fillStyle = '#393550'; ctx.fillRect(0,0,w,h); } //绘制底图 function drawPic(){ //drawImage(img,x,y,width,height) //x轴坐标正方向向右,y轴坐标正方向向下,(0,0)在canvans左上角 ctx.drawImage(girlPic,100,150,600,300); } //鼠标移动 function mousemove(e){ if(e.offsetX || e.layerX){ var px = e.offsetX == undefined ?e.layerX:e.offsetX; var py = e.offsetY == undefined ?e.layerY:e.offsetY; //out switchy = false;in switchy = true; //px 在范围内&&py在范围内 if(px>100 &&px<700&&py>150&&py<450){ switchy = true; } else{ switchy = false; } } } //控制星星出现 function aliveUpdate(){ if(switchy){ //星星出现 life += 0.03 * deltaTime * 0.05; if(life>1){ life = 1; } } else{ //星星消失 life -= 0.03 * deltaTime * 0.05; if(life<0){ life = 0; } } }
stars.js
var starObj = function(){ this.x; this.y; this.picNo; this.timer; this.xSpd; this.ySpd; }; //绘制多个星星 starObj.prototype.init = function(){ this.x = Math.random()*600 + 100; this.y = Math.random()*300 + 150; this.picNo = Math.floor(Math.random()*7); this.timer = 0; this.xSpd = Math.random()*3 - 1.5; this.ySpd = Math.random()*3 -1.5; }; starObj.prototype.update = function(){ //随机位移 this.x += this.xSpd * deltaTime *0.002; this.y += this.ySpd * deltaTime *0.002; //this.x 超过范围 初始化一个星星 if(this.x<100 || this.x>700){ this.init(); return; } //this.y 超过范围 初始化一个星星 if(this.y<150 || this.y>450){ this.init(); return; } this.timer += deltaTime; //星星闪烁 if(this.timer>100){ this.picNo += 1; this.picNo %= 7; this.timer = 0; } }; starObj.prototype.draw = function(){ //save() globalAlpha 只作用于星星 ctx.save(); //globalAlpha 全局透明度 ctx.globalAlpha = life; //drawImage(img,sx,sy,swidth,sheight,x,y,width,height) ctx.drawImage(starPic,this.picNo*7,0,7,7,this.x,this.y,7,7); //restore() ctx.restore(); }; function drawStars(){ for(var i = 0;i<num;i++){ stars[i].update(); stars[i].draw(); } }
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <canvas id="canvas" width="800" height="600"></canvas> </div> <script type="text/javascript" src="js/commonFunctions.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/stars.js"></script> </body> </html>
posted on 2022-06-30 13:49 caicai2015 阅读(242) 评论(0) 编辑 收藏 举报