canvas画布--随机动感小球

这两天学习canvas，把一些东西总结一下，比起枯燥的每一条的总结，直接上代码来的更直接。

index.html文件

<div class="box">
    <div class="text">
		<h2>欢迎来到canvs动画小球世界</h2>
		<canvas id="canvas3" width="1500" height="400"></canvas>
	</div>
</div>

index.js文件

var c=document.getElementById("canvas3");
var ctx=c.getContext("2d");
var arr=[];
var maxData=30;
//随机产生小球
timer=setInterval(function(){
	//限定小球个数
	if(arr.length>maxData){
		clearInterval(timer);
	}
	//小球圆心坐标及半径随机产生
	x=200+Math.ceil(Math.random()*600);
	y=30+Math.ceil(Math.random()*100);
	r=20+Math.ceil(Math.random()*10);
	//小球颜色随机产生
	var red=Math.floor(Math.random()*256);
	var blue=Math.floor(Math.random()*256);
	var green=Math.floor(Math.random()*256);
	var alpha=0.5+Math.random()*0.3;
	//小球运动速度随机产生(-2,2)之间
	var sX=-2+Math.ceil(Math.random()*4);
	var sY=-2+Math.ceil(Math.random()*4);
	var obj={
		background:`rgba(${red},${green},${blue},${alpha})`,
		x:x,//随机小圆圆心坐标横坐标
		y:y,//随机小圆圆心坐标纵坐标
		r:r,随机小圆半径
		sX:sX,//随机速度X
		sY:sY//随机速度Y
	}
	//防止小球不动
	if(sX!==0 || sY!==0){
		arr.push(obj);
	}
},1000/20);
//每一秒刷新60次画布，让小球动起来
setInterval(function(){
	//画过之后清除画布，防止上次还在成为运动线
	ctx.clearRect(0,0,c.width,c.height);
	for(var i=0;i<arr.length;i++){
		ctx.beginPath();
		arr[i].x+=arr[i].sX;
		arr[i].y+=arr[i].sY;
		if(arr[i].y+arr[i].r>=c.height || arr[i].y-arr[i].r<=0){
			arr[i].sY*=-1;
		}
		if(arr[i].x+arr[i].r>=c.width || arr[i].x-arr[i].r<=0){
			arr[i].sX*=-1;
		}
		ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
		ctx.fillStyle=arr[i].background;
		ctx.strokeStyle="blue";
	    ctx.stroke();
		ctx.fill();
	}
},1000/60);

index.css样式如下：

#canvas3{
	border:1px solid blue;
	width: 100%;
	background-image: linear-gradient(rgba(100,200,190,0.7),rgba(230,160,200,0.9)): 
}
.text{
	position:relative;
}
html h2{
	position: absolute;
	top:50%;
	left:50%;
	transform: translateX(-50%) translateY(-50%);
}

最终效果展示：