将canvas元素用作图像缓冲区是更有益还是将img元素用作缓冲区更有益？ [英] Is it more beneficial to use a canvas element as a buffer for the image or is it more beneficial to use an img element as a buffer?

问题描述

我想对画布上的图像做大量的动画处理；将画布元素用作图像缓冲区是否更有利（这样我们就不必再次调整大小）还是将img元素用作缓冲区更有利？

I want to do a ton of animation with images on canvas; is it more beneficial to use a canvas element as a buffer for the image (so that we do not have to resize again) or is it more beneficial to use an img element as a buffer?

或者实际上是否有更好的方法，如果性能是我应该做的头等大事而我却想念的话，必须做吗？

Or is there actually a better way, a must-do if performance is top-priority that I should do and I'm missing?

为什么清理画布的操作如此缓慢？我的背景是Windows Phone 7的xna编程，并且清除整个屏幕是最快的操作之一。

Also, why is "clearing" the canvas such a slow operation? My background is xna programming for windows phone 7 and "clearing" the whole screen is one of the fastest operation.

此外，我是否应该通过设置<清除画布strong> width = width 还是应该执行 drawRect（0,0，width，height）吗？

Also, should I "clear" the canvas by setting width=width or should I do a drawRect(0,0,width,height) ?

推荐答案

您应该将canvas元素用作已转换图像的缓冲区，并在整数坐标上对齐drawImage调用。

You should use canvas elements as buffers for transformed images and align your drawImage calls on integer coords. Software canvas implementations get slow once you need to transform the image (because transforming = resampling = slow.)

请参见： http://jsperf.com/canvas-drawimage

清除画布，使用clearRect： http://jsperf.com/canvas-clear-speed

Clearing the canvas, use clearRect: http://jsperf.com/canvas-clear-speed

这篇关于将canvas元素用作图像缓冲区是更有益还是将img元素用作缓冲区更有益？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！