canvas实现闪亮的星星

2022-06-30 14:02:54 阅读：253 来源： 互联网

标签：星星 function canvas ctx 闪亮 window var Math

之前网上看到一个一闪一闪星星的教程，觉得挺有意思的，于是按照效果自己做了一下。

实现效果：鼠标移动上去出现星星闪动，移开星星消失

源代码：

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>

标签：星星,function,canvas,ctx,闪亮,window,var,Math
来源： https://www.cnblogs.com/wss198909/p/16426614.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

canvas实现闪亮的星星