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 secvar 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里观察出来），为使动画移动速率不因帧率改变而变化，因此我们重新计算帧率，并根据这个数值来更新矩形移动速度。