canvas中的线性小球

来源：恒创科技编辑：恒创科技编辑部

2024-01-18 22:56:59

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>

</head>
<body>
	<canvas id="cvs" ></canvas>
	<script>
	var canvas=document.querySelector('#cvs')
	var ctx=canvas.getContext('2d');
	  
	  var width=document.documentElement.clientWidth-6;
	  var	height=document.documentElement.clientHeight-6;
	  
	  canvas.width=width;
	  canvas.height=height;
	  
	   //产生随机数
	   function r(num){
		   return parseInt(Math.random()*num);
	   }
	
	
		//创建小球类 
		function Ball(text){
			//小球坐标
			this.x=r(400)+50;//小球位置在【50，450）
			this.y=r(400)+50;
			//小球运动速度
			this.xspeed=r(3)+2;//速度范围为【2，5）
			this.yspeed=r(3)+1;
			//小球半径
			this.r=r(40)+10;//[10,50）
			//接收外部参数
			this.text=text;
							
		}
		//小球的显示
		Ball.prototype.show=function(){
			this.run();//更新坐标
			drawBall(this.x,this.y,this.r);//画小球
			drawText(this.text,this.x+this.r,this.y+this.r);//画文字
		};
		
		
		//封装方法
		function drawBall(x,y,r){
			ctx.beginPath();//为了保证不会出现连笔
			ctx.fillStyle="#"+parseInt((Math.random()*0xFFFFFF)).toString(16);
			ctx.arc(x,y,r,0,Math.PI*2,true);
			ctx.fill();
			ctx.closePath();
		}
		function drawText(text,x,y){
			ctx.font='10px 楷体';
			ctx.textAlign="right";
			ctx.textBaseline='top';
			ctx.fillText(text,x,y);
			
		}
		function drawLine(x1,y1,x2,y2,color){
			ctx.beginPath();
			ctx.moveTo(x1,y1);
			ctx.lineTo(x2,y2);
			ctx.strokeStyle="#"+parseInt((Math.random()*0xFFFFFF)).toString(16);
			ctx.stroke();
			ctx.closePath();
			
		}
		//小球运动过程中碰撞检测
		Ball.prototype.run=function(){
			if(this.x-this.r<=0||this.x+this.r>=width){
				this.xspeed=-this.xspeed;
			}
			this.x=this.x+this.xspeed;
			if(this.y-this.r<=0||this.y+this.r>=0){
				this.yspeed=-this.yspeed;
			}
			this.y=this.y+this.yspeed;    
			
		}
		var text='javascript html5 jquery css vue'.split(' ');
		var ballArr=[];//存放小球
		for(var i=0;i<5;i++){
		var ball=new Ball(text[i]);
		ballArr.push(ball);
		ball.show();
		
		for(var j=0;j<i;j++){
			var prevball=ballArr[j];
			drawLine(ball.x,ball.y,prevball.x,prevball.y);
		}
		
		}
		
		
		
		//小球运动
		setInterval(function(){
			ctx.clearRect(0,0,width,height);//运动前清除画布
			for(var i=0;i<ballArr.length;i++){
				ballArr[i].show();
				for(var j=0;j<i;j++){
					var prevball=ballArr[j];
					drawLine(ballArr[i].x,ballArr[i].y,prevball.x,prevball.y);
				}
			}
		},2);
	</script>
</body>

</html>