Jscript动画系列(2)-----让小球在Canvas运动（随机）

最新推荐文章于 2021-07-12 14:25:58 发布

Jsenna

最新推荐文章于 2021-07-12 14:25:58 发布

阅读量578

点赞数

分类专栏： Html5+Canvas+JS动画文章标签： setInterval Html5 Javasrcipt动画 Canvas 小球

本文链接：https://blog.csdn.net/Jsenna/article/details/83306674

版权

Html5+Canvas+JS动画专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文是上一篇文章的扩展，但并不依赖上一篇文章，代码可独立运行。

欢迎，萌新提问，大神评论

前面我们已经将小球画在了Canvas上，现在可以给它一个初始位置和初始速度，为了防止小球跑出Canvas，还会加上边界。

Html内容（基本没有变化）

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是：小球的随机运动</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<canvas id="canvas" width="600" height="400" style="background-color: #000" ></canvas>
		<script src="Ball.js"></script>
		<script>
			window.onload=function(){
				var canvas = document.getElementById('canvas');
					context = canvas.getContext('2d');
				var ball=new Ball();
				//随机位置
				ball.x=Math.random()*canvas.width;
				ball.y=Math.random()*canvas.height;
				//随机速度
				ball.vx=Math.random()*5;
				ball.vy=Math.random()*5;
				
				function Draw(){
					context.clearRect(0,0,canvas.width,canvas.height); //清除canvas的全部内容
					ball.move(ball); //调用小球的移动方法
					ball.draw(context);//调用小球的绘制方法
				}
				setInterval(Draw,1000/60);//计时器
			};

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

从代码中可以看到小球的位置属性(x,y)和速度属性(vx,xy)都被赋予了一个随机值。我们还设置了一个计时器，可以看到这里使用的时setInterval而不是setTimeout，以每秒60帧的频率刷新Canvas；当然也可以改为其他值。

二者的区别

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

ball.js的内容

function Ball (radius,color){
	if(radius === undefined){radius=40;}
	if(color === undefined){color="#ff0000";}
	this.x=0;//x轴坐标
	this.y=0;//y轴坐标
	this.radius=radius;//半径
	this.vx = 0;
	this.vy = 0;
	this.rotation=0;//旋转角度
	this.color=color;//utils.parseColor(color);
	this.lineWidth=1;
	this.bounce=-1; //速度取反
}
Ball.prototype.draw=function(context){
	context.save();//先保存一下当前画布状态
	context.translate(this.x,this.y); //将坐标原点设置为(x,y)，默认
	context.rotate(this.rotation); //旋转当前绘图
	context.lineWidth=this.lineWidth; //画笔粗细
	context.fillStyle=this.color;  //圆圈内填充的颜色
	context.beginPath();  //开始一条绘画路径
	context.arc(0,0,this.radius,0,(Math.PI*2),true); //画一个圆
	context.closePath();  //结束当前路径
	context.fill();  //开始填充
	//若有边框
	if(this.lineWidth>0){
		context.stroke(); //绘制边框
	}
	context.restore();//将绘图状态置为保存值。
};

//边界检测函数
Ball.prototype.checkWalls=function(ball){
	//右边界
	if(ball.x+ball.radius>canvas.width){
		ball.x=canvas.width-ball.radius;
		ball.vx*=this.bounce;
	}
	//左边界
	else if(ball.x-ball.radius<0){
		ball.x=ball.radius;
		ball.vx*=this.bounce;
	}
	//下边界
	if(ball.y+ball.radius>canvas.height){
		ball.y=canvas.height-ball.radius;
		ball.vy*=this.bounce;
	}
	//上边界
	else if(ball.y-ball.radius<0){
		ball.y=ball.radius;
		ball.vy*=this.bounce;
	}
}

//运动函数
Ball.prototype.move=function(ball){
	this.checkWalls(ball);
	//将速度累加到位置上
	this.x+=this.vx;
	this.y+=this.vy;
}

在代码中我们给ball类增加了一个属性速度取反（this.bounce）两个方法一个边界检测（checkWalls）和移动（move）,这里就是使用到了ball类的vx、vy属性。

下面是运行时的动图

打包代码下载地址

https://download.csdn.net/download/jsenna/10739266

Jsenna

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jscript动画系列(2)-----让小球在Canvas运动（随机）

本文是上一篇文章的扩展，但并不依赖上一篇文章，代码可独立运行。欢迎，萌新提问，大神评论前面我们已经将小球画在了Canvas上，现在可以给它一个初始位置和初始速度，为了防止小球跑出Canvas，还会加上边界。Html内容（基本没有变化）&lt;!doctype html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8...
复制链接

扫一扫

专栏目录