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  阅读(294)  评论(0)    收藏  举报

导航