在 JavaScript 中，您可以使用 setInterval 和 setTimeout 函数来创建延迟并限制帧速率。
例如，如果您想让绘图循环大约为 30 FPS，您可以使用如下所示的代码：
function draw(){
var canvas = document.getElementById('myCanvas');
//create the image object
var img = new Image();
//set the image object's image file path
var img.src = "images/myImage.png"
//check to see that our canvas exists
if( canvas.getContext )
{
//grab the context to draw to.
var ctx = cvs.getContext('2d');
//clear the screen to a white background first
//NOTE to make this faster you can clear just the parts
//of the canvas that are moving instead of the whole thing
//every time. Check out 'Improving HTML5 Canvas Performance'
//link mention in other post
ctx.fillStyle="rgb(255,255,255)";
ctx.fillRect (0, 0,512, 512);
//DO ALL YOUR DRAWING HERE....
//draw animation
ctx.drawImage(img, 0, 0);
}
//Recalls this draw update 30 times per second
setTimeout(draw,1000/30);
}
这将帮助您控制动画所花费的处理时间。因此，如果您发现动画速度太慢，您可以通过将分母“30”更改为“60”fps 或任何真正适合您的程序的值来提高帧速率。
就优化而言，除了 setTimeout() 之外，绘制动画的方式也很重要。尝试在渲染之前加载所有图像，这称为“预加载”。也就是说，如果每个动画单元都有一堆不同的图像，那么在调用绘制函数之前，将所有图像加载到图像数组中，如下所示：
var loadedImages = new Array();
loadedImages[0] = new Image();
loadedImages[0].src = "images/animationFrame1.png";
loadedImages[1] = new Image();
loadedImages[1].src = "images/animationFrame2.png";
loadedImages[2] = new Image();
loadedImages[2].src = "images/animationFrame3.png";
loadedImages[3] = new Image();
loadedImages[3].src = "images/animationFrame4.png";
如果对您的应用程序有意义，您甚至可以将它们放入哈希中，而不是
loadedImages[0] = new Image();
loadedImages[0].src = "images/animationFrame1.png";
你做这个
loadedImages['frame1'] = new Image();
loadedImages['frame1'].src = "images/animationFrame1.png";
一旦加载了所有图像，您就可以通过像这样调用它们来引用它们进行绘制：
//Using the integer array
ctx.drawImage(loadedImages[0], 0, 0);
//OR
//Using the stringed hash
ctx.drawImage(loadedImages['frame1'], 0, 0);
您希望将加载过程与渲染过程分开，因为加载图像是过程密集型的，因此如果您在渲染时加载内容，则会减慢动画速度。
这并不是说您在渲染时无法加载任何内容，而是要良心地认为这会减慢动画速度。
Here http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317是一篇关于预加载图像的文章。
这里还有另一篇文章讨论了所有浏览器上一致的动画速度here https://stackoverflow.com/questions/3136644/how-do-i-make-a-javascript-animation-play-at-the-same-speed-on-all-browsers-on-al/3140559#3140559
请注意link http://gafferongames.com/game-physics/fix-your-timestep/由绿色勾选答案发布
其他需要注意的事情是确保仅清除和重绘边界框，如 HTML 5 画布优化帖子中提到的。该链接有一些非常好的技术，在开发画布动画时需要注意。
Here http://www.admixweb.com/2010/01/07/17-javascript-animation-frameworks-worth-to-seing/还有一些框架工作可能会派上用场，可以将您正在做的事情与其他引擎正在做的事情进行交叉比较。
希望有些帮助。我对 javascript 很陌生（大约两周前才开始用它编码），所以可能有更好的方法来做事情，但这些是我迄今为止发现的东西。
