# HTML5 Canvas ：运动和轨迹

## 简谐运动

``````<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>
``````

``````<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>
``````

## 匀速直线运动

``````// 横向运动
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>
``````

## 匀加速直线运动

``````// 加速速度
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>
``````