HTML5 Canvas动画发散的小球

最新推荐文章于 2024-08-22 11:32:42 发布

luer9

最新推荐文章于 2024-08-22 11:32:42 发布

阅读量2.7k

点赞数

本文链接：https://blog.csdn.net/qq_40046426/article/details/100734284

版权

www.luery.xyz

效果很不错可以试着运行看看

一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id = "can" width="800" height="600"></canvas>
	</body>
	<script>
		var can = document.getElementById("can");
		var ctx = can.getContext("2d");
		var x = 100;
		//ball
		function Ball(x,y,r,cl,sp){
			this.x = x;
			this.y = y;
			this.r = r;
			this.cl = cl;
			this.sp = sp;
		}
		//改变位置
		Ball.prototype.update = function(){
			this.x += this.sp;
		}
		//呈现这个小球
		Ball.prototype.render = function(){
			ctx.beginPath();
			ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
			ctx.fillStyle = this.cl;
			ctx.closePath();
			ctx.fill();
		}
		var objArr = [];
		for(var i = 0; i < 20; i++) {
			var r = parseInt(Math.random()*60 + 2);
			var sp = parseInt(Math.random()*5 + 1);
			var cl = "rgba("+parseInt(Math.random()*256)+","
							+parseInt(Math.random()*256)+"," 
							+parseInt(Math.random()*256)
							+",0.7)";
			var ball = new Ball(x,20+i*50,r,cl,sp);
			objArr[i] = ball;
		}
		
		setInterval(function(){
			ctx.clearRect(0,0,800,600);
			for(var i = 0; i< objArr.length;i++){
				objArr[i].update();
				objArr[i].render();
			}
		},1000/30);
	
	</script>
</html>

二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id = "can" width="800" height="600"></canvas>
	</body>
	<script>
		var can = document.getElementById("can");
		var ctx = can.getContext("2d");
		var x = 100;
		//ball
		function Ball(x,y,r,cl,spx,spy){
			this.x = x;
			this.y = y;
			this.r = r;
			this.cl = cl;
			this.spx = spx;
			this.spy = spy;
		}
		//改变位置
		Ball.prototype.update = function(){
			this.x += this.spx;
			this.y += this.spy;
		}
		//呈现这个小球
		Ball.prototype.render = function(){
			ctx.beginPath();
			ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
			ctx.fillStyle = this.cl;
			ctx.closePath();
			ctx.fill();
		}
		var objArr = [];
		for(var i = 0; i < 50; i++) {
			var r = parseInt(Math.random()*60 + 2);
			var spx = parseInt(Math.random()*20 - 15);
			var spy = parseInt(Math.random()*20 - 15);
			var cl = "rgba("+parseInt(Math.random()*256)+","
							+parseInt(Math.random()*256)+"," 
							+parseInt(Math.random()*256)
							+",0.7)";
			var ball = new Ball(400,300,r,cl,spx,spy);
			objArr[i] = ball;
		}
		
		setInterval(function(){
			ctx.clearRect(0,0,800,600);
			for(var i = 0; i< objArr.length;i++){
				objArr[i].update();
				objArr[i].render();
			}
		},1000/40);
	
	</script>
</html>