HTML5 Canvas彩色小球碰撞运动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5 Canvas彩色小球碰撞运动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas彩色小球碰撞运动特效</title>
</head>

<style>
#canvas{
	border: 1px dashed #999;
	box-shadow:0px 4px 40px #233;
	/*background: black;*/
}
</style>
<body>
<center>
<canvas id="canvas" width="800" height="600"></canvas>
</center>
<script type="text/javascript">
	var canvas=document.getElementById("canvas");
	var context=canvas.getContext("2d");
	var maxWidth=canvas.width;
	var maxHeight=canvas.height;
	var colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]

	//随机数
	function random(min,max){
		return Math.floor(Math.random()*(max-min)+min)
	}

	//构造函数
	function Ball(){
		this.a=true;
		this.b=true;
		this.r=random(10,30);
		this.ballColor={color: colors[Math.floor(Math.random() * colors.length)]}
		this.vx=random(30,maxWidth-30);
		this.vy=random(30,maxHeight-30);
		this.ispeed=random(1,10);
		this.ispeed2=random(1,10);
	}

	// 面向对象
	Ball.prototype.moveBall=function(){
		context.beginPath();
		if (this.a) {
			this.vx += this.ispeed;
			if (this.vx>=maxWidth-this.r) {	
				this.a = false;
			}

		} else {
			this.vx -= this.ispeed;
			if (this.vx <= this.r) {
				this.a = true;
			}
		}

		if (this.b) {
			this.vy+= this.ispeed2;
			if (this.vy >= maxHeight-this.r) {
				this.b = false;
			}

		} else {
			this.vy -= this.ispeed2;
			if (this.vy <= this.r) {
				this.b = true;
			}
		}

		context.fillStyle=this.ballColor.color;
		context.arc(this.vx,this.vy,this.r,0,Math.PI*2,false);
		context.fill();
	}

	var Aball=[];
	for(var i=0;i<100;i++){
		Aball[i]=new Ball();
	}

	setInterval(function(){
		context.clearRect(0,0,canvas.width,canvas.height)
		for(var i=0;i<100;i++){
			Aball[i].moveBall();
		}
		
	},30)

</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)