HTML5 drawImage在Chrome上运行缓慢 [英] HTML5 drawImage slow on Chrome
问题描述
使用HTML5进行屏幕外渲染时，我确实遇到了一些困难！
我编写的代码在Firefox上运行得非常好，在画布元素上使用drawImage可以绘制平滑的图像，而且很快。
I'm having some real difficulty with offscreen rendering with HTML5! The code I have written runs perfectly fine with Firefox, using drawImage on canvas elements draws smooth images and does so very quickly.
但是，使用Chrome 21， drawImage性能非常糟糕。我看不到哪里出了问题。
However, using Chrome 21, the drawImage performance is just terrible. I'm unable to see where I'm going wrong.
这是一个带有一些示例代码的jsfiddle：
http://jsfiddle.net/DXgum/3/
Here is a jsfiddle with some sample code: http://jsfiddle.net/DXgum/3/
在Firefox中，我可以得到大约60fps，Chrome仅提供10fps的帧率。
如果我使用内部画布元素或非内部画布元素，性能不会有所不同。
In Firefox, I can get about 60fps, chrome only delivers a framerate of 10fps. The performance does not differ if I'm using in-dom canvas elements or not-in-dom.
在Chrome上进行不带缓冲的渲染比Firefox快，所以我实际上不确定为什么Chrome的drawImage会出现这样的问题。
Rendering without buffering on Chrome is faster than Firefox, so I'm actually not sure why Chrome is having such a problem with drawImage.
对此事的任何帮助或帮助将不胜感激！
Any help or light into the matter would be greatly appreciated!
系统信息：
- Windows 7 32bit
- 英特尔QX9650
- Nvidia GTS 250
- 4GB DDR2 RAM
- Chrome版本：21.0.1180.60 m
- Firefox版本：14.0.1
- Windows 7 32bit
- Intel QX9650
- Nvidia GTS 250
- 4GB DDR2 RAM
- Chrome Version: 21.0.1180.60 m
- Firefox Version: 14.0.1
推荐答案
我已经多年来一直为此苦苦挣扎。一个版本的chrome很好，下一个版本的chrome再次变慢...我的最终解决方案有些棘手，但可以。
I've been struggling with this for years. One version of chrome it's fine, the next release it's slow again... My ultimate solution is a little hacky, but it works.
使用您的小提琴，我能够确定如果画布的大小是< = 256，性能会大幅下降。
Using your fiddle I was able to determine for sure that performance massively dropped off if the size of the canvas is <= 256.
我的画布是200 x 200。
My canvas was 200 x 200.
我只是将画布制作为258 x 258，更改所有数学运算以适应新尺寸并使用画布包装器div上的CSS zoom属性可以将画布的外观缩小到原始大小。
I simply made my canvas 258 x 258, change all the math to accommodate the new dimensions and used the CSS zoom property on the canvas's wrapper div to shrink the appearance of the canvas down to the approximate original size.
这样做，我从30-40 fps跳到了不错的水平稳定在60。
Doing this, I went from 30-40 fps to a nice steady 60.
这篇关于HTML5 drawImage在Chrome上运行缓慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
