Question

我遇到了一个问题，它会减慢画布上的动画速度，因为各种图片会向左，向右，向上和向下移动。我需要有关如何优化动画的建议。

动画适用于所有主流浏览器，尤其是Chrome，Firefox和Internet Explorer。

是否可以优化动画？也许拖延绘图？提前谢谢。

Answer 1

此链接解释了一些HTML 5画布优化，并为多个浏览器提供了性能结果：http://www.html5rocks.com/en/tutorials/canvas/performance/

Answer 2

在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";

你甚至可以把它们放在哈希中，如果它对你的app而不是

有意义

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是一篇关于预加载图片的文章。

此处还有另一篇文章讨论了所有浏览器here

的动画速度

请注意绿色选中答案

发布的link

需要注意的其他事项是确保仅使用HTML 5画布优化的帖子中提到的清除和重绘边界框。这个链接有一些非常好的技巧，可以在开发画布动画时保持良心。

Here也是一些框架，它可以派上用场，将你正在做的事情与其他引擎正在做的事情进行交叉比较。

希望其中一些有帮助。我是javascript的新手（大约2周前才开始用它编码）所以可能有更好的方法来做事情，但这些是我迄今为止发现的事情。

Answer 3

window.requestAnimationFrame（）是让动画更顺畅运行的一种可靠方法。

https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame

（跨浏览器http://paulirish.com/2011/requestanimationframe-for-smart-animating/）

但是，它无法解决问题中遗漏的绘图代码可能出现的问题。

如何在画布上优化动画？ HTML 5

3 个答案: