canvas系列教程05 ——交互、动画
交互
实时获取鼠标在Canvas中的坐标
//将tools定义为window对象的属性，该属性的值是一个对象
window.tools = {};
//获取鼠标位置
window.tools.getMouse = function (element) {
//定义一个mouse的对象
var mouse = { x: 0, y: 0 };
//为传入的元素添加mousemove事件
addEvent(element, "mousemove", function (e) {
var x, y;
//在IE中，event对象是作为window对象的一个属性存在
var e = e || window.event;
//获取鼠标当前位置，并作兼容处理
//兼容Firefox、chrome、IE9及以上
if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
}
//兼容IE8及以下，以及混杂模式下的Chrome和Safari
else {
x = e.clientX + document.body.scrollLeft || document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop || document.documentElement.scrollTop;
}
//将当前的坐标值减去canvas元素的偏移位置，则x、y为鼠标在canvas中的相对坐标
x -= element.offsetLeft;
y -= element.offsetTop;
mouse.x = x;
mouse.y = y;
})
//返回值为mouse对象
return mouse;
}
var txt = $$("txt");
var mouse = tools.getMouse(cnv);
cnv.addEventListener("mousemove", function () {
txt.innerHTML = "鼠标当前坐标为：（" + mouse.x + "," + mouse.y + "）";
}, false);
通过键盘控制图形移动
封装【获取键盘控制方向】的函数，写在 js/tools.js 中
//获取键盘控制方向
window.tools.getKey = function () {
var key = {};
window.addEventListener("keydown", function (e) {
if (e.keyCode == 38 || e.keyCode == 87) {
key.direction = "up";
} else if (e.keyCode == 39 || e.keyCode == 68) {
key.direction = "right";
} else if (e.keyCode == 40 || e.keyCode == 83) {
key.direction = "down";
} else if (e.keyCode == 37 || e.keyCode == 65) {
key.direction = "left";
} else {
key.direction = "";
}
}, false);
return key;
}
| keyCode |
按键 |
|---|---|
| W（上） |
87 |
| S（下） |
83 |
| A（左） |
65 |
| D（右） |
68 |
| ↑ |
38 |
| ↓ |
40 |
| ← |
37 |
| → |
39 |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script src="js/tools.js"></script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//初始化一个圆形
drawBall(cnv.width / 2, cnv.height / 2);
//初始化变量
var x = 100;
var y = 75;
//获取按键方向
var key = tools.getKey();
//添加鼠标按下事件
window.addEventListener("keydown", function (e) {
//清除整个Canvas，以便重绘新的圆形
cxt.clearRect(0, 0, cnv.width, cnv.height);
//根据key.direction的值，判断小球移动方向
switch (key.direction) {
case "up":
y -= 2;
drawBall(x, y);
break;
case "down":
y += 2;
drawBall(x, y);
break;
case "left":
x -= 2;
drawBall(x, y);
break;
case "right":
x += 2;
drawBall(x, y);
break;
//default值
default:
drawBall(x, y);
}
}, false);
//定义绘制小球的函数
function drawBall(x, y) {
cxt.beginPath();
cxt.arc(x, y, 20, 0, 360 * Math.PI / 180, true);
cxt.closePath();
cxt.fillStyle = "#6699FF";
cxt.fill();
}
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
</body>
</html>
按键盘上的方向键控制图形移动
switch语句，一定要加入default值的表达式，不然如果按下的是其他按键，小球就会消失了（没有重绘）。
switch (key.direction) {
case "up":
……
case "down":
……
case "left":
……
case "right":
……
default:
……
}
动画
原理：通过 requestAnimationFrame()方法，循环清除画布，并重绘动画后的新图形。
requestAnimationFrame() 与 setInterval() 功能类似，但 setInterval() 存在性能问题，且需手动设置循环间隔时间，而requestAnimationFrame() 无需手动设置，它会自动根据浏览器绘制的帧率进行调整。
重要提醒：
（1）对于需要不断改变的变量，一般在动画循环之前先定义。
（2）对于需要不断改变的变量，一般在动画循环中图形绘制之后才递增或递减。
开发技巧：复杂的动画效果从x轴和y轴两个方向来考虑，实现的思路会变得非常清晰。
封装【requestAnimationFrame()方法兼容代码】的函数，写在 js/tools.js 中
window.requestAnimationFrame = (
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, 1000/60);
}
);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script src="js/tools.js"></script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//初始化变量，也就是初始化圆的x轴坐标为0
var x = 0;
//动画循环
(function frame() {
window.requestAnimationFrame(frame);
//每次动画循环都先清空画布，再重绘新的图形
cxt.clearRect(0, 0, cnv.width, cnv.height);
//绘制圆
cxt.beginPath();
cxt.arc(x, 70, 20, 0, 360 * Math.PI / 180, true);
cxt.closePath();
cxt.fillStyle = "#6699FF";
cxt.fill();
//变量递增
x += 2;
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
</body>
</html>
物理动画
物理动画，即模拟现实世界的一种动画效果。在物理动画中，物体会遵循牛顿运动定律，如射击游戏中打出去的炮弹会随着重力而降落。
追随鼠标旋转
原理：每次鼠标移动的时候，计算鼠标当前位置与箭头中心的夹角，然后把这个夹角作为箭头旋转的角度，重绘箭头即可。
封装【绘制箭头】的函数，写在 js/arrow.js 中
function Arrow(x,y,color,angle)
{
//箭头中心x坐标，默认值为0
this.x = x || 0;
//箭头中心y坐标，默认值为0
this.y = y || 0;
//颜色，默认值为"#FF0099"
this.color = color || "#FF0099";
//旋转角度，默认值为0
this.angle = angle || 0;
}
Arrow.prototype = {
stroke: function (cxt) {
cxt.save();
cxt.translate(this.x, this.y);
cxt.rotate(this.angle);
cxt.strokeStyle = this.color;
cxt.beginPath();
cxt.moveTo(-20, -10);
cxt.lineTo(0, -10);
cxt.lineTo(0, -20);
cxt.lineTo(20, 0);
cxt.lineTo(0, 20);
cxt.lineTo(0, 10);
cxt.lineTo(-20, 10);
cxt.closePath();
cxt.stroke();
cxt.restore();
},
fill: function (cxt) {
cxt.save();
cxt.translate(this.x, this.y);
cxt.rotate(this.angle);
cxt.fillStyle = this.color;
cxt.beginPath();
cxt.moveTo(-20, -10);
cxt.lineTo(0, -10);
cxt.lineTo(0, -20);
cxt.lineTo(20, 0);
cxt.lineTo(0, 20);
cxt.lineTo(0, 10);
cxt.lineTo(-20, 10);
cxt.closePath();
cxt.fill();
cxt.restore();
}
};
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script src="js/arrow.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//实例化一个箭头，中点坐标为画布中心坐标
var arrow = new Arrow(cnv.width / 2, cnv.height / 2);
//获取鼠标坐标
var mouse = tools.getMouse(cnv);
(function drawFrame() {
window.requestAnimationFrame(drawFrame, cnv);
cxt.clearRect(0, 0, cnv.width, cnv.height);
var dx = mouse.x - cnv.width / 2;
var dy = mouse.y - cnv.height / 2;
//使用Math.atan2()方法计算出鼠标与箭头中心的夹角
arrow.angle = Math.atan2(dy, dx);
arrow.fill(cxt);
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
body>
html>
实时计算两点间的距离
dx = x2 - x1;
dy = y2 - y1;
distance = Math.sqrt(dx*dx + dy*dy);
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
var text = document.getElementById("p1");
var x = cnv.width / 2;
var y = cnv.height / 2;
var mouse = tools.getMouse(cnv);
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
cxt.save();
cxt.beginPath();
cxt.moveTo(x, y);
//mouse.x表示鼠标的x轴坐标，mouse.y表示鼠标的y轴坐标
cxt.lineTo(mouse.x, mouse.y);
cxt.closePath();
cxt.strokeStyle = "red";
cxt.stroke();
cxt.restore();
var dx = mouse.x - x;
var dy = mouse.y - y;
var distance = Math.sqrt(dx * dx + dy * dy);
text.innerText = "鼠标与中点距离为：" + distance;
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
<p id="p1">p>
body>
html>
圆周运动
正圆运动
通过圆心坐标和角度，可以计算出圆周上任意一点的坐标
封装【绘制球】的函数，写在新建 js/ball.js 中
function Ball(x,y,radius,color)
{
//小球中心的x坐标，默认值为0
this.x = x || 0;
//小球中心的y坐标，默认值为0
this.y = y || 0;
//小球半径，默认值为12
this.radius = radius || 12;
//小球颜色，默认值为"#6699FF"
this.color = color || "#6699FF";
this.scaleX = 1;
this.scaleY = 1;
}
Ball.prototype = {
//绘制"描边"小球
stroke: function (cxt) {
cxt.save();
cxt.scale(this.scaleX, this.scaleY);
cxt.strokeStyle = this.color;
cxt.beginPath();
cxt.arc(this.x, this.y, this.radius, 0, 360 * Math.PI / 180, false);
cxt.closePath();
cxt.stroke();
cxt.restore();
},
//绘制"填充"小球
fill: function (cxt) {
cxt.save();
cxt.translate(this.x, this.y);
cxt.rotate(this.rotation);
cxt.scale(this.scaleX, this.scaleY);
cxt.fillStyle = this.color;
cxt.beginPath();
cxt.arc(0, 0, this.radius, 0, 360 * Math.PI / 180, false);
cxt.closePath();
cxt.fill();
cxt.restore();
}
}
范例代码：
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script src="js/ball.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//实例化一个小球，中心坐标为（100，25），半径、颜色都取默认值
var ball = new Ball(100, 25);
var centerX = cnv.width / 2;
var centerY = cnv.height / 2;
var radius = 50;
var angle = 0;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
//绘制圆形
cxt.beginPath();
cxt.arc(centerX, centerY, 50, 0, 360 * Math.PI / 180, false);
cxt.closePath();
cxt.stroke();
//计算小球坐标
ball.x = centerX + Math.cos(angle) * radius;
ball.y = centerY + Math.sin(angle) * radius;
ball.fill(cxt);
//角度递增
angle += 0.05;
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
body>
html>
椭圆运动
x = centerX + Math.cos(angle)*radiusX;
y = centerY + Math.sin(angle)*radiusY;
范例代码：
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script src="js/ball.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
var ball = new Ball(100, 25);
var centerX = cnv.width / 2;
var centerY = cnv.height / 2;
var radiusX = 60;
var radiusY = 40;
var angle = 0;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
//计算小球坐标
ball.x = centerX + Math.cos(angle) * radiusX;
ball.y = centerY + Math.sin(angle) * radiusY;
ball.fill(cxt);
//角度递增
angle += 0.05;
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
body>
html>
左右摆动
x = centerX + Math.sin(angle) * range;
angle += speed;
- （centerX，centerY）表示物体中心坐标
- angle表示角度（弧度制）
- range表示振幅
- speed表示角度改变的大小。
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script src="js/ball.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
var ball = new Ball(cnv.width / 2, cnv.height / 2);
var angle = 0;
var range = 80;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
ball.x = cnv.width / 2 + Math.sin(angle) * range;
ball.fill(cxt);
//角度递增
angle += 0.05;
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
body>
html>
上下波动前进
y = centerY + Math.sin(angle) * range;
angle += speed;
- （centerX，centerY）表示物体中心坐标
- angle表示角度（弧度制）
- range表示振幅
- speed表示角度改变的大小。
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script src="js/ball.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
var ball = new Ball(0, cnv.height / 2);
var angle = 0;
var range = 40;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
ball.x += 1;
ball.y = cnv.height / 2 + Math.sin(angle) * range;
ball.fill(cxt);
//角度递增
angle += 0.05;
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
body>
html>
放大缩小（脉冲）
scaleX = 1 + Math.sin(angle) * range;
scaleY = 1 + Math.sin(angle) * range;
angle += speed;
- scaleX表示物体x轴方向缩放的倍数
- scaleY表示物体y轴方向缩放的倍数
- angle表示角度（弧度制）
- range表示振幅
- speed表示角度改变的大小
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script src="js/ball.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
var ball = new Ball(cnv.width / 2, cnv.height / 2, 25);
var range = 0.5;
var angle = 0;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
ball.scaleX = 1 + Math.sin(angle) * range;
ball.scaleY = 1 + Math.sin(angle) * range;
ball.fill(cxt);
//角度递增
angle += 0.05;
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
body>
html>
匀速直线运动
匀速直线运动——物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移是相等的。
匀速运动是一种加速度为0的运动。匀速运动只有一种，那就是：匀速直线运动。很多人以为“匀速圆周运动”也是匀速运动，其实这是错误的。事实上，匀速圆周运动准确来说应该是匀速率圆周运动或者匀角速度运动。它的加速度是不为0的，因此匀速圆周运动并不是匀速运动。
水平/垂直匀速直线运动
object.x + = vx;
object.y + = vy;
- object.x表示物体x轴坐标
- object.y表示物体y轴坐标
- vx表示x轴方向的速度大小
- vy表示y轴方向的速度大小
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script src="js/ball.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//实例化一个小球
var ball = new Ball(0, cnv.height / 2);
//定义x轴速度为2，也就是每帧向正方向移动2px
var vx = 2;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
ball.x += vx;
ball.fill(cxt);
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
body>
html>
任意方向的匀速直线运动
使用速度分解实现
vx = speed * Math.cos(angle * Math.PI/180);
vy = speed * Math.sin(angle * Math.PI/180);
object.x += vx;
object.y += vy;
- object.x表示物体x轴坐标
- object.y表示物体y轴坐标
- vx表示x轴方向的速度大小
- vy表示y轴方向的速度大小
- speed表示任意方向的速度大小
- angle表示该速度的方向与x轴正方向的夹角
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script src="js/ball.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//实例化一个小球，球心坐标、半径以及颜色都采用默认值
var ball = new Ball();
var speed = 2;
//速度方向与x轴正方向角度为30°
var vx = speed * Math.cos(30 * Math.PI / 180);
var vy = speed * Math.sin(30 * Math.PI / 180);
(function drawFrame() {
window.requestAnimationFrame(drawFrame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
ball.x += vx;
ball.y += vy;
ball.fill(cxt);
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
body>
html>
经典范例：箭头跟随鼠标移动
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script src="js/arrow.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//实例化一个箭头，箭头中心坐标为画布中心坐标
var arrow = new Arrow(cnv.width / 2, cnv.height / 2);
var mouse = tools.getMouse(cnv);
var speed = 1.5;
var angle = 0;
(function drawFrame() {
window.requestAnimationFrame(drawFrame, cnv);
cxt.clearRect(0, 0, cnv.width, cnv.height);
//计算出鼠标与箭头中心之间的夹角
var dx = mouse.x - cnv.width / 2;
var dy = mouse.y - cnv.height / 2;
angle = Math.atan2(dy, dx);
var vx = Math.cos(angle) * speed;
var vy = Math.sin(angle) * speed;
arrow.x += vx;
arrow.y += vy;
arrow.angle = angle;
arrow.fill(cxt);
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
body>
html>
首先初始化速度（speed）和角度（angle），然后将鼠标当前坐标减去箭头的坐标，得到dx、dy，之后再使用Math.atan2()得到夹角度数，最后使用三角函数将速度分解为x和y两个方向的分速度。
加/减速直线运动
水平或垂直加/减速直线运动
加速运动，指的是方向相同、速度大小变化的运动。速度递增的是加速运动，速度递减的是减速运动。
加速度，指的是单位时间内速度改变的矢量。
vx += ax;
vy += ay;
object.x += vx;
object.y += vy;
- (object.x,object.y) 为物体的坐标
- vx表示x轴方向的速度大小
- vy表示y轴方向的速度大小
- ax表示x轴方向加速度，ay表示y轴方向加速度。当ax大于0时，物体向右做匀加速运动；当ax小于0时，物体向左做匀加速运动；当ax等于0时，物体按原来速度运动。ay跟ax是一样的。
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script src="js/ball.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//实例化一个小球
var ball = new Ball(0, cnv.height / 2);
//初始化x轴速度以及加速度
var vx = 0;
var ax = 0.2;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
ball.x += vx;
ball.fill(cxt);
vx += ax;
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
body>
html>
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script src="js/ball.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//实例化一个小球
var ball = new Ball(0, cnv.height / 2);
//初始化x轴速度以及加速度
var vx = 8;
var ax = -0.2;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
ball.x += vx;
ball.fill(cxt);
vx += ax;
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
body>
html>
由于小球最开始的时候在x轴上有一个正方向的初始速度（varvx=8;），因此小球一开始会向右运动。但是由于加速度为负值，所以小球一开始向右做的是匀减速运动。当速度减到0的时候，此时加速度却不为0，接下来小球会继续向左做匀加速运动。
任意方向加/减速直线运动
分解加速度即可
ax = a * Math.cos(angle * Math.PI/180);
ay = a * Math.sin(angle * Math.PI/180);
vx += ax;
vy += ay;
object.x += vx;
object.y += vy;
- (object.x,object.y) 为物体的坐标
- vx表示x轴方向的速度大小
- vy表示y轴方向的速度大小
- ax表示x轴方向加速度
- ay表示y轴方向加速度。
- a表示任意方向的加速度大小
- angle表示该加速度的方向与x轴正方向的夹角
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script src="js/ball.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
var ball = new Ball();
var a = 0.2;
//计算出x轴和y轴2个方向的加速度
var ax = a * Math.cos(30 * Math.PI / 180);
var ay = a * Math.sin(30 * Math.PI / 180);
var vx = 0;
var vy = 0;
(function drawFrame() {
window.requestAnimationFrame(drawFrame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
ball.x += vx;
ball.y += vy;
ball.fill(cxt);
vx += ax;
vy += ay;
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
body>
html>
重力
因地球引力引起的加速度，运动规律与加速运动相同。
vy += gravity;
object.y += vy;
抛物线运动
在x轴方向做的是匀速运动，在y轴方向做的是减加速运动（受到重力影响）
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/utils.js">script>
<script src="js/ball.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//初始化数据
var ball = new Ball(0, cnv.height);
var vx = 4;
var vy = -5;
var gravity = 0.2;
(function drawFrame() {
window.requestAnimationFrame(drawFrame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
ball.x += vx;
ball.y += vy;
ball.fill(cxt);
//变量递增
vy += gravity;
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
body>
html>
垂直落地反弹
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script src="js/ball.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//初始化数据
var ball = new Ball(cnv.width / 2, 0);
//y轴初始速度为0，重力加速度为0.2，反弹系数为-0.8
var vy = 0;
var gravity = 0.2;
var bounce = -0.8;
(function drawFrame() {
window.requestAnimationFrame(drawFrame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
ball.y += vy;
//边界检测
if (ball.y > cnv.height - ball.radius) {
ball.y = cnv.height - ball.radius;
//速度反向并且减小
vy = vy * bounce;
}
ball.fill(cxt);
vy += gravity;
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
body>
html>
if(ball.y>cnv.height-ball.radius){}是一个边界检测，表示当“小球y轴坐标”大于“画布高度减去小球半径”时执行的操作。
小球碰到地面都会反弹，由于反弹会有速度损耗，并且小球y轴速度方向会变为反方向，因此需要乘以一个反弹系数bounce。反弹系数取值一般为-1.0～0之间的任意数。
- 反弹之后，速度方向变为相反方向了，所以反弹系数是负数呢
- 反弹之后，速度只会变小，所以反弹系数取值为-1.0～0之间任意数，而不能是-2、-3
前抛落地反弹
在水平方向上加个速度即可
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script src="js/ball.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//初始化数据
var ball = new Ball(0, cnv.height);
var vx = 3;
var vy = -6;
var gravity = 0.2;
var bounce = -0.75;
(function drawFrame() {
window.requestAnimationFrame(drawFrame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
ball.x += vx;
ball.y += vy;
//边界检测
if ((ball.y + ball.radius) > cnv.height) {
ball.y = cnv.height - ball.radius;
vy = vy * bounce;
}
ball.fill(cxt);
//变量递增
vy += gravity;
})();
}
script>
head>
<body>
<canvas id="canvas" width="300" height="150" style="border:1px solid silver;">canvas>
body>
html>
摩擦力
摩擦力，指阻碍物体相对运动的力。其中摩擦力的方向与物体相对运动的方向相反。摩擦力只会改变速度的大小而不会改变它的方向。换句话说，摩擦力只能将物体的速度降至0，但它无法让物体掉头往相反的方向移动。
vx *= friction;
vy *= friction;
object.x += vx;
object.y += vy;
摩擦系数和上一节接触的反弹系数非常像
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script src="js/ball.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//初始化数据
var ball = new Ball(0, cnv.height / 2);
//初始化x轴方向速度为2，摩擦系数为0.95
var vx = 8;
var friction = 0.95;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
ball.x += vx;
ball.fill(cxt);
//变量改变
vx *= friction;
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
body>
html>
- 任意方向运动遇到摩擦力
当物体沿任意方向运动时，如果我们加入摩擦力因素，那么每次都是先把该方向的速度分解为x轴和y轴两个方向的分速度，然后再用分速度乘以摩擦系数。
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta charset="utf-8" />
<script src="js/tools.js">script>
<script src="js/ball.js">script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
//初始化数据
var ball = new Ball();
var speed = 8;
var vx = speed * Math.cos(30 * Math.PI / 180);
var vy = speed * Math.sin(30 * Math.PI / 180);
var friction = 0.95;
(function drawFrame() {
window.requestAnimationFrame(drawFrame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
ball.x += vx;
ball.y += vy;
ball.fill(cxt);
//变量改变
vx *= friction;
vy *= friction;
})();
}
script>
head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;">canvas>
body>
html>
