canvas学习案例之简单的物理运动
这次主要写2种简单的运动效果，包括匀速直线运动、匀加速直线运动。在码代码之前先了解下canvas动画效果的基本实现原理，其核心思想是先定义一个初始状态，然后定义一个定时器，定时器内执行一个方法，在这个方法中要清除当前的画面，然后重新绘制需要变化的效果。由于人眼存在残影，所以短时间内的中断的变化可以看成是连续的变化。
以下代码都是基于下面的html结构
<canvas id="canvas" width="728" height="400">
你的浏览器不支持canvas，请跟换其他浏览器试一试
</canvas>
匀速直线运动
首先了解下概念：是指运动快慢不变（即速度不变）、沿着直线的运动。
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
canWid = canvas.width,
canHei = canvas.height;
ctx.fillStyle = '#0c0';
setInterval(function () {
if (startPoint < (-30)) {
speed = 0;
startPoint = canWid + 30;
}
run(ctx);
}, 80)
var speed = 0, //定义速度为0
startPoint = canWid + 30; //小球开始的起点
function run(ctx) {
speed = -6;
ctx.clearRect(0, 0, canWid, canHei); //清除画布
startPoint += speed; //关键点重新计算坐标，每次都减少6
ctx.beginPath();
ctx.arc(startPoint, canHei / 2, 30, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
}
匀加速直线运动
匀变速直线运动的定义：在直线运动中，把加速度的大小和方向都不改变的运动(加速度为正时)，称之为匀加速直线运动。
2个基本的公式：
速度公式： 速度 = 初始速度 + 加速度x时间
位移公式: 位移 = 初始速度x时间 + 0.5x加速度x时间x时间
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
canWid = canvas.width,
canHei = canvas.height,
ballRadius = 30;
ctx.fillStyle = '#0c0';
setInterval(function() {
if (startPoint < (-1)*ballRadius) {
v0 = 0;
v = 0;
a = 10;
time = 0;
s = 0;
startPoint = canWid + 30;
}
run(ctx);
}, 70)
var v0 = 0,
v = 0,
a = 10,
time = 0,
s = 0,
startPoint = canWid + ballRadius;
function run(ctx) {
time += 0.1; //控制时间的变化
s = -(0.5 * a * (time * time)); //根据公式计算位移
startPoint += s;
ctx.clearRect(0, 0, canWid, canHei);
ctx.beginPath();
ctx.arc(startPoint, canHei / 2, ballRadius, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
}
其中setInterval定时器可以用requestAnimationFrame来代替。
关于requestAnimationFrame的用法可以参考这篇文章http://feg.netease.com/archives/451.html
手机阅读请扫描下方二维码：
上一篇：我写的代码真的规范吗
下一篇：屏幕尺寸、分辨率、倍率到底是什么鬼
12345678
12345678
12345678
1
12345678
12345678
12345678
12345678
12345678
12345678
12345678
555
555
555
555
1
555
12345678
12345678
12345678
12345678
1
1
1
1
1
1
1
1
1
1
1
12345678
12345678
12345678
12345678
12345678
12345678
12345678
ughueuqsisfghlnlwlzw
12345678
12345678
12345678
1
12345678
12345678
12345678
12345678
12345678
12345678
1
1
1
1
1
555
1
1
555
1
1
1
1
555
1
1
1
1
1
1
555
1
1
555
1
555
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1