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

12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678

12345678

12345678
12345678

12345678
12345678
12345678
12345678

ughueuqsisfghlnlwlzw
12345678

12345678

12345678

12345678

12345678

12345678

12345678

12345678

12345678
