Animation with javascript and canvas_问答_开发者

开发者 https://www.devze.com 2023-03-16 02:02 出处：网络

I can make simple animations with canvas. But i I have to clean every frame before painting and it makes painting slower (fps ~ 15)

I can make simple animations with canvas. But i I have to clean every frame before painting and it makes painting slower (fps ~ 15) I've tried to use 2 canvases, but there is no success. Do you have any idea h开发者_如何学Pythonow i can increase fps? Can i use the buffering? and how?

If you are drawing lots of images you can increase the performance greatly by drawing the images onto a canvas element and storing that instead of the image. Drawing a canvas element onto another canvas element is a lot faster than drawing an image.

It depends largely on how you're drawing your animations. Manipulating the canvas pixel data array can be very slow as array traversal in JS is slower than native GPU-accelerated rendering. It can help to isolate only the parts of the canvas that need to be redrawn, rather than clearing the whole thing, but you may already know that!

No, you will really need to clean it evey frame. But, as pointed out by TJHeuvel, the simple act of clearing the canvas every frame shouldn't affect the performance. The problem is probably in your logic to update the content varibles, possibly looping through objects that don't take any action in the time you update the canvas drawing.

I have experienced this problem before too as I have a 1920x1200 screen and thus the number of pixels that the canvas needs to clear is massive. It's only really a problem if your browser is using software rendering as a GPU would have no problem with that.

One thing you can do (as mentioned by others before me) is to only clear parts of the canvas.

Another thing you can do is make sure that the user has hardware acceleration turned on for their browser. On Windows, you can tell the user to enable hardware acceleration in about:flags in Chrome. IE9 has it on by default and does a really good job. I think Firefox also has Direct2D acceleration on by default.

For cases like Chrome where users have to manually set it what you could do is measure the framerate while your app is running and if it is really slow show them some text to tell them to make sure they have hardware acceleration enabled for their browser.