HTML5 Canvas笔记 -- 3

     今天写一下如何实现一个在Canvas内运动的矩形框。

     简单叙述一下流程：

     1）首先定义矩形的位置、速度（像素/秒）、帧率、速度方向这些初始信息。

     2）绘制矩形，并调用setInerval(animaion,1000/帧率)，开始绘制动画。

     3）绘制动画开始和结束的时刻分别记录下当前时刻，下一帧开始前，重新计算当前帧率(1000/（endTime-startTime）)，并根据

          这个帧率更新速度为v/fps，即每帧要移动的像素数。

      

     JS代码：

     

var anmiCanvas = document.getElementById("anmiCanvas");
var anmiCanvasContext = anmiCanvas.getContext("2d");

anmiCanvas.style.background ="rgba(9,1,34,0.7)";

var rectWidth = 50,rectHeight = 50;
var v = 60;  //v pixel per sec
var angle = generateRandomAngle(0,Math.PI*2);
var vx = v*Math.cos(angle), vy = v*Math.sin(angle);
var fps = 60;
var vxpf = vx/fps, vypf = vy/fps;

var posX = 50, posY =50;

var nowTime=0,lastFrameTime=0;
var pause = false;

function generateRandomAngle(startAngle,endAngle){
return startAngle+((endAngle-startAngle)/(1-0))*(Math.random()-0);
}

function animation(time) {
if (!pause) {
if (nowTime == 0) {
lastFrameTime = +new Date();
} else {
lastFrameTime = nowTime;
}

anmiCanvasContext.clearRect(0, 0, anmiCanvas.width, anmiCanvas.height);

if (posX + vxpf + rectWidth > anmiCanvas.width || posX + vxpf < 0) {
vxpf = -vxpf;
vx = -vx;
}
if (posY + vypf + rectHeight > anmiCanvas.height || posY + vypf < 0) {
vypf = -vypf;
vy = -vy;
}
posX += vxpf;
posY += vypf;
drawRect(posX, posY);

nowTime = +new Date();
updateFPS(lastFrameTime, nowTime);
}
}

function updateFPS(lastFrameTime,nowTime){
fps = 1000/(nowTime-lastFrameTime);
vxpf = vx/fps, vypf = vy/fps;
console.log("fps :: "+fps);
}

function drawRect(posX,posY){
anmiCanvasContext.fillStyle = "blue";
anmiCanvasContext.fillRect(posX,posY,rectWidth,rectHeight);
}

drawRect(posX,posY);
taskId = setInterval(animation,1000/60);

function reInitAttr(){
angle = generateRandomAngle(0,Math.PI*2);
vx = v*Math.cos(angle), vy = v*Math.sin(angle);
fps = 60;
vxpf = vx/fps, vypf = vy/fps;
posX = 50, posY =50;
taskId = setInterval(animation,1000/60);
}

document.getElementById("stop").onclick=function(e){
if(e.target.innerHTML=="Stop"){
window.clearInterval(taskId);
e.target.innerHTML="Start";
nowTime = 0;
}else if(e.target.innerHTML=="Start"){
reInitAttr();
e.target.innerHTML="Stop";
}
}
document.getElementById("pause").onclick=function(e){
if(e.target.innerHTML=="Pause"){
e.target.innerHTML="Resume";
pause = true;
nowTime = 0;
}else if(e.target.innerHTML=="Resume"){
pause=false;
e.target.innerHTML="Pause";
}
}

     这里添加了暂定、停止按钮，停止后再开始动画，速度方向重新随机（0-2*PI）。

     每帧动画过后重新计算帧率是因为浏览器执行setInerval并不一定是按照给定时间间隔来执行（这一点可以在打印的log里观察出来），为使动画移动速率不因帧率改变而变化，因此我们重新计算帧率，并根据这个数值来更新矩形移动速度。