如何在画布上优化动画？ HTML 5 [英] How to optimize animation on canvas? HTML 5

问题描述

我面临着减慢动画在画布上，各种图片移动左，右，上，下​​一个问题。我需要如何优化动画的建议。

I am faced with a problem that slows down animation on a canvas, as various pictures move left, right, up and down. I need advice on how to optimize the animation.

重要的是，在动画适用于所有主要的浏览器，特别是：浏览器，Firefox和Internet Explorer

It is important that the animation works on all main browsers, in particular: Chrome, Firefox and Internet Explorer.

是否可以优化动画？也许把图纸上的延迟？谢谢你在前进。

Is it possible to optimize the animation? Maybe put a delay on the drawing? Thank you in advance.

推荐答案

在JavaScript的你可以使用setInterval和setTimeout的函数来创建延迟和油门的帧速率。

In javascript you can use the setInterval and setTimeout functions to create delays and throttle the frame rate.

例如，如果您想让您的绘图循环大约30 FPS，你可以有一些code，看起来像这样：

for instance if you wanted to make your drawing loop approximately 30 FPS you could have some code that looks like this:

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'的东西，如60fps或任何真的很适合你的程序提高帧速率。

This will help you control how much processing time the animation is taking. Thus if you find that your animation is going too slow you can increase the frame rate by changing the denominator '30' to something like '60' fps or anything that really works well for your program.

至于优化去除了的setTimeout（）您绘制动画的方式是非常关键的。尝试在渲染之前他们这个被称为preloading加载所有的图像。也就是说，如果你有一堆不同的图像的每一个单元格动画，然后你打电话给你绘制函数加载之前所有的图像转换成图像，这样一个数组：

As far as optimizing goes in addition to setTimeout() the way you draw your animations is critical too. Try to load all your images before you render them this is called "Preloading". That is if you have a bunch of different images for each animated cell then before you call your draw function load all the images into an array of images like so:

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

你甚至可以把它们放到一个哈希如果它使你感觉应用程序，而不是在哪里

you could even put them in a hash if it makes sense for you app where instead of

loadedImages[0] = new Image();
loadedImages[0].src = "images/animationFrame1.png";

您做到这一点。

loadedImages['frame1'] = new Image();
loadedImages['frame1'].src = "images/animationFrame1.png";

一旦你把所有的图像加载，可以参考他们这样做调用它们像这样画：

once you have all your images loaded you references them for drawing by doing calling them like so:

//Using the integer array
ctx.drawImage(loadedImages[0], 0, 0);
//OR
//Using the stringed hash 
ctx.drawImage(loadedImages['frame1'], 0, 0);

您想您的加载过程从渲染过程中分开，因为加载图像的过程是这样密集会减缓你的动画下来，如果您正在加载的东西，而渲染。

You want to separate your loading process from your rendering process because loading images is process intensive thus will slow your animations down if you are loading things while rendering.

这是不是说，你永远不能加载任何东西，而渲染，而只是说句良心话，这将降低动画的速度下降。

That is not to say that you can't ever load anything while rendering, but instead just be conscience that this will slow animation speed down.

这里是文章preloading图像。

Here is an article on preloading images.

有是这里的另一个帖子里面谈到在所有浏览器有关一致动画速度<一个href=\"http://stackoverflow.com/questions/3136644/how-do-i-make-a-javascript-animation-play-at-the-same-speed-on-all-browsers-on-al/3140559#3140559\">here

There is another post on here which talks about consistent animation speed on all browsers here

注意链接发布通过绿色检查答案

其他的事情要注意的是确保只结算和在岗与HTML 5画布优化提到重绘边界框。这种联系有一些非常好的技巧是同时开发的画布动画的良心。

Other things to be noted are making sure to only clearing and redrawing bounding boxes as mentioned in the post with HTML 5 canvas optimization. That link has some really good techniques to be conscience of while developing canvas animations.

这里一些框架工程，以及它可能会派上用场过比较你在做什么其他引擎正在做什么。

Here are some frame works as well which might come in handy to cross compare what you are doing to what other engines are doing.

希望一些这有助于。我是新来的JavaScript（才开始用它的编码约2周前），因此有可能是更好的方式来做事，但这些是我迄今发现的事情。

Hope some of this helps. I am new to javascript (only started coding with it about 2 weeks ago) and so there could be better ways to do things but these are the things I have found thus far.

这篇关于如何在画布上优化动画？ HTML 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！