HTML5之canvas彩色动感小球

╰+哭是因爲堅強的太久メ 2022-05-13 05:24 270阅读 0赞

### 一：代码 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>小球</title>
    		<style type="text/css">
    			canvas{
    				border: 2px solid orange;
    				display: block;
    				margin: 50px auto;
    			}
    		</style>
    	</head>
    	<body style="margin: 0;">
    	 
    		<canvas id="can" width="600" height="400" ></canvas>
    		 
    	</body>
    	<script type="text/javascript">
    		var can = document.getElementById("can");
    		var ctx = can.getContext("2d");
     		ctx.fillStyle="darkred";
    		var x=100;
    		
    //		定义类 
    		function Ball(x,y,r,cl,speedx,speedy){//类的构造器
    			this.x=x;
    			this.y=y;
    			this.r=r;
    			this.cl=cl;
    			this.speedx=speedx;	
    			this.speedy=speedy;
    		}
    		Ball.prototype.render=function(){//添加绘制的类方法
    			ctx.beginPath();//开始绘制
    			ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
    			ctx.closePath();
    			ctx.fillStyle=this.cl;
    			ctx.fill();
    		}
    		Ball.prototype.update=function(){//小球的x y速度
    			this.x+=this.speedx;
    			this.y+=this.speedy;
    		}
    		
    		
    //		声明小球数量
    		var obArr=[];
    		for (var i=0;i<50;i++) {
    			var r = Math.random()*50;//随机半径
     			var spx=Math.random()*8-4;//随机x轴速度
     			var spy=Math.random()*8-4;//随机y轴速度
     			//随机颜色
     	 		var cc="rgba("+parseInt(Math.random()*256)+","
     						+parseInt(Math.random()*256)+","
     						+parseInt(Math.random()*256)+",0.5)";
     
    			var ball=new Ball(300,200,r,cc,spx,spy);
    			obArr[i]=ball;
    		}
    		
     		setInterval(function(){
     			ctx.clearRect(0,0,600,400);//清空画布
      			 for (var i = 0; i < obArr.length; i++) {
     		 		obArr[i].update();
     			 	obArr[i].render();
     			 }
     		},20);
     	 
       
    	</script>
    </html>

### 二：效果图 ###

![70][]

[70]: /images/20220513/b133480cad9d404fabfeabb5cdefb269.png