canvas小球绕斜椭圆轨迹运动

在MDN web docs中有过关于使用canvas来绘制太阳系动画的例子，此种方法需要使用translate来不断改变画布原点。

现在需要在canvas画布上绘制一个小球绕椭圆转动的动画效果

首先可以使用js 构造函数模式定义一个小球对象

function ball(x, y, obj) {
	this.x = x;
	this.y = y;
	this.angle = 0;
	this.draw = function() {
		var self = this;
		ctx.drawImage(obj, self.x, self.y);
	}
};

x和y代表绘制小球在画布上的坐标
angle代表小球绕中心点运动的角度值，最大为360。在动画绘制过程中，当角度等于360时让角度置为0。
obj为需要绘制的小球

通过以下代码将小球绘制在画布上

<style type="text/css">
	#mycanvas {
		margin: 80px;
		border: 1px solid black;
	}
</style>
<canvas id="mycanvas" width="500" height="500"></canvas>
		
<script type="text/javascript">
	var canvas = document.getElementById('mycanvas');
	var ctx = canvas.getContext('2d');
	var imgball = new Image(); // 创建img元素
	imgball.src = './img/Canvas_earth.png';
	imgball.onload = function() {
		ctx.drawImage(imgball, 200, 100);
	}

	function ball(x, y, obj) {
		this.x = x;
		this.y = y;
		this.angle = 0;
		this.draw = function() {
			var self = this;
			ctx.drawImage(obj, self.x, self.y);
		}
	};
	
	var ball01 = new ball(167, 100, imgball);
	function draw() {
	    ctx.clearRect(0, 0, canvas.width, canvas.height);
		ball01.draw();
	}
</script>

ctx.clearRect(0, 0, canvas.width, canvas.height);可以清除画布之前的轨迹

效果：
在这里插入图片描述
接下来可以让小球做正椭圆轨迹运动，小球的直径是24，半径是12

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas');
	var ctx = canvas.getContext('2d');
	var imgball = new Image(); // 创建img元素
	imgball.src = './img/Canvas_earth.png';
	imgball.onload = function() {
		ctx.drawImage(imgball, 200, 100);
	}

	function ball(x, y, obj) {
		this.x = x;
		this.y = y;
		this.angle = 0;
		this.draw = function() {
			var self = this;
			ctx.drawImage(obj, self.x, self.y);
		}
	};

	var ball01 = new ball(167, 100, imgball);
	var P0 = 0, P1 = 0, Z0 = 9 ,Z1 = 3;
	function draw() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		if (ball01.angle == 360) {
			ball01.angle = 0;
		}
		ball01.angle += 1; //角度
		var radian = ball01.angle * (Math.PI / 180); //弧度

		ball01.x = (167 + 140 * Math.cos(radian)) - 24 / 2;   //小球半径
		ball01.y = (100 + 40 * Math.sin(radian)) - 24 / 2;
		ball01.draw();
		
		raf = window.requestAnimationFrame(draw);
	}
	draw();
</script>

效果：
小球作正椭圆轨迹运动
而斜椭圆则是相当于正椭圆相对于中心原点旋转一定角度后形成的
在这里插入图片描述
斜椭圆x,y坐标点的计算公式：

当前代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
		<style type="text/css">
			#mycanvas {
				margin: 80px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<canvas id="mycanvas" width="500" height="500"></canvas>

		<script type="text/javascript">
			var canvas = document.getElementById('mycanvas');
			var ctx = canvas.getContext('2d');
			var imgball = new Image(); // 创建img元素
			imgball.src = './img/Canvas_earth.png';

			function ball(x, y, obj) {
				this.x = x;
				this.y = y;
				this.angle = 0;
				this.draw = function() {
					var self = this;
					ctx.drawImage(obj, self.x, self.y);
				}
			};

			var ball01 = new ball(167, 100, imgball);
			function draw() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				if (ball01.angle == 360) {
					ball01.angle = 0;
				}
				ball01.angle += 1; //角度
				var radian = ball01.angle * (Math.PI / 180); //弧度
				var nx = (167 + 140 * Math.cos(radian)) - 24 / 2;
				var ny = (100 + 40 * Math.sin(radian)) - 24 / 2;
				ball01.x = nx * Math.cos(-1 / 6 * Math.PI) - ny * Math.sin(-1 / 6 * Math.PI) - 50;
				ball01.y = nx * Math.sin(-1 / 6 * Math.PI) + ny * Math.cos(-1 / 6 * Math.PI) + 80;
				ball01.draw();

				raf = window.requestAnimationFrame(draw);
			}
			draw();
		</script>
	</body>
</html>

效果：
在这里插入图片描述
如果不进行轨迹消除，那么形成的椭圆就如下图所示：

canvas小球绕斜椭圆轨迹运动

猜你喜欢