HTML5 Canvas ：运动和轨迹
简谐运动
简谐运动是最基本也是最简单的一种机械振动。当某物体进行简谐运动时，物体所受的力跟位移成正比，并且力总是指向平衡位置。
简谐运动的实现可以通过正弦曲线实现，正弦曲线是一种来自数学三角函数中的正弦比例的曲线。它的形状就像完美的海上波浪般，以三角函数正弦比例改变而形成。
正弦曲线在 canvas 中的应用使得图形运动或变化的过程中变得顺滑，并且，不断增大的弧度在正弦曲线的特性中产生只在 -1 和 1 范围内的值，于是形成了天然的循环效果。
例如：
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border: 1px solid">
你的浏览器不支持canvas,请升级你的浏览器
</canvas>
</body>
</html>
<script>
// 准备画布
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var angle = -1;
setInterval(function(){
var x = 100 + Math.sin(angle) * 50;
var y = 100;
var r = 20;
ctx.clearRect(0,0,200,200);
ctx.beginPath();
ctx.arc(x,y,r,0,2 * Math.PI);
ctx.fill();
angle += 0.1;
},100)
</script>
改变 r 值可以使圆形的大小变化平滑：
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border: 1px solid">
你的浏览器不支持canvas,请升级你的浏览器
</canvas>
</body>
</html>
<script>
// 准备画布
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var angle = -1
setInterval(function(){
var x = 100
var y = 100
var r = 20 + Math.sin(angle) * 20
ctx.clearRect(0,0,200,200)
ctx.beginPath();
ctx.arc(x,y,r,0,2 * Math.PI);
ctx.fill();
angle += 0.1;
},100)
</script>
圆周运动
在物理学中，圆周运动是指运动轨迹为圆或圆的一部分的一种运动。
主要计算方式：
x = centerX + Math.sin(angle) * radius
y = centerY + Math.cos(angle) * radius
例如：
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border: 1px solid">
你的浏览器不支持canvas,请升级你的浏览器
</canvas>
</body>
</html>
<script>
// 准备画布
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var angle = -1; // 运动时的角度，通过控制角度来让事物运动起来
var centerX = 100; // 设置圆周轨迹的圆心坐标
var centerY = 100;
var radius = 50; // 轨迹半径
setInterval(function () {
ctx.clearRect(0, 0, 200, 200)
// 计算圆周轨迹的每一个坐标
var x = centerX + Math.sin(angle) * radius;
var y = centerY + Math.cos(angle) * radius;
// 画出小球
ctx.beginPath();
ctx.arc(x, y, 10, 0, 2 * Math.PI);
ctx.fill();
// 递加角度
angle += 0.1;
}, 100)
</script>
椭圆运动
椭圆和正圆的唯一区别就是正圆上任何一个点到圆心的距离都是一样的，而椭圆却不一样。
主要计算方式：
x = centerX + Math.sin(angle) * radiusX
y = centerY + Math.cos(angle) * radiusY
例如：
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border: 1px solid">
你的浏览器不支持canvas,请升级你的浏览器
</canvas>
</body>
</html>
<script>
// 准备画布
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var angle = -1; // 运动时的角度，通过控制角度来让事物运动起来
var centerX = 100; // 设置圆周轨迹的圆心坐标
var centerY = 100;
var radiusX = 80; // 轨迹横轴半径
var radiusY = 50; // 轨迹纵轴半径
setInterval(function () {
ctx.clearRect(0, 0, 200, 200)
// 计算圆周轨迹的每一个坐标
var x = centerX + Math.sin(angle) * radiusX;
var y = centerY + Math.cos(angle) * radiusY;
// 画出小球
ctx.beginPath();
ctx.arc(x, y, 10, 0, 2 * Math.PI);
ctx.fill();
// 递加角度
angle += 0.1;
}, 100)
</script>
与正圆运动不一样的是，椭圆运动是根据两个半径值来计算的（radiusX为80，radiusY为50）：
匀速直线运动
一个物体在每一段相同的时间内的移动距离都相等的话，则此现象我们称之该物体为等速度直线运动，简称为等速度运动。
主要计算方式：
// 横向运动
x = x + v
// 纵向运动
y = y + v
// 斜线运动
x = x + vx
y = y + vy
// 向某个角度运动
x = x + v * Math.cos(angle)
y = y + v * Math.sin(angle)
例如：
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border: 1px solid">
你的浏览器不支持canvas,请升级你的浏览器
</canvas>
</body>
</html>
<script>
// 准备画布
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var v = 1
var x1 = 0
var y1 = 0
var x2 = 0
var y2 = 0
var vx = 1
var vy = 1.5
var v3 = 1
var x3 = 0
var y3 = 0
var angle = 30 //30度角
setInterval(function () {
ctx.clearRect(0, 0, 200, 200);
// 横向运动(红)
x1 = x1 + v;
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(x1, 100, 10, 0, 2 * Math.PI);
ctx.fill();
// 纵向运动(蓝)
y1 = y1 + v;
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(100, y1, 10, 0, 2 * Math.PI);
ctx.fill();
// 斜线运动(绿)
x2 = x2 + vx
y2 = y2 + vy
ctx.beginPath();
ctx.fillStyle = "green";
ctx.arc(x2, y2, 10, 0, 2 * Math.PI);
ctx.fill();
// 向某个角度运动(黑)
var radians = angle * Math.PI / 180;
x3 = x3 + v3 * Math.cos(radians)
y3 = y3 + v3 * Math.sin(radians)
ctx.beginPath();
ctx.fillStyle = "black";
ctx.arc(x3, y3, 10, 0, 2 * Math.PI);
ctx.fill();
if (x1 > 200) x1 = 0;
if (y1 > 200) y1 = 0;
if (x2 > 200 || y2 > 200) x2 = y2 = 0;
if (x3 > 200 || y3 > 200) x3 = y3 = 0;
}, 10)
</script>
匀加速直线运动
若一物体沿直线运动，且在运动的过程中加速度保持不变，则称这一物体在做匀加速直线运动。
物体在运动过程中，其速度的变化量与发生这一变化所用时间的比值称为加速度（用a表示），它的意义是表示质点速度变化的快慢的物理量，属于矢量，既有大小也有方向。从计算的角度来看，加速度就是增加到速度向量上的数值。
计算方式：
// 加速速度
v = v + av
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border: 1px solid">
你的浏览器不支持canvas,请升级你的浏览器
</canvas>
</body>
</html>
<script>
// 准备画布
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 加速度
var av = 0.01
var v = 1
var x = 0
var y = 0
setInterval(function () {
ctx.clearRect(0, 0, 200, 200);
// 加速速度
v = v + av;
// 横向运动(红)
x = x + v;
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(x, 100, 10, 0, 2 * Math.PI);
ctx.fill();
// 纵向运动(蓝)
y = y + v;
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(100, y, 10, 0, 2 * Math.PI);
ctx.fill();
if (x > 200) x = 0;
if (y > 200) y = 0;
if (v > 10) v = 0.01;
}, 10)
</script>
自由落体运动 属于垂直向下的 匀加速直线运动 , 自由落体的加速度称为重力加速度，用 g 来表示。
平抛运动
当物体在具有一定初速度并水平抛出时，在空气阻力忽略不计的情况下，只在重力作用下的运动叫做平抛运动。
平抛运动的本质是匀速直线运动与自由落体运动的合运动，所以平抛运动遵循这两个分运动的规律。
计算方式：
// 匀速直线运动
x = x + vx;
// 匀加速直线运动
vy = vy + g;
y = y + vy;
例如：
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border: 1px solid">
你的浏览器不支持canvas,请升级你的浏览器
</canvas>
</body>
</html>
<script>
// 准备画布
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 0, y = 0
var g = 0.1
var vx = 5
var vy = 0
setInterval(function () {
// 匀速直线运动
x = x + vx;
// 匀加速直线运动
vy = vy + g;
y = y + vy;
ctx.clearRect(x, y, 200, 200);
ctx.beginPath();
ctx.arc(x, y, 5, 0, 2 * Math.PI);
ctx.fill();
if (x > 200) {
x = y = 0;
g = 0.1
vy = 0
}
}, 100)
</script>
- 本文链接： https://www.zdyla.com/post/html5-canvas-motion-trajectory.html
- 版权声明： 本博客所有文章和照片除特别声明外，转载请联系作者获取授权，并请注明出处！