问题
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.
However, using Chrome 21, the drawImage performance is just terrible. I'm unable to see where I'm going wrong.
Here is a jsfiddle with some sample code: http://jsfiddle.net/DXgum/3/
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.
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!
System Information:
- Windows 7 32bit
- Intel QX9650
- Nvidia GTS 250
- 4GB DDR2 RAM
- Chrome Version: 21.0.1180.60 m
- Firefox Version: 14.0.1
回答1:
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.
Using your fiddle I was able to determine for sure that performance massively dropped off if the size of the canvas is <= 256.
My canvas was 200 x 200.
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.
Doing this, I went from 30-40 fps to a nice steady 60.
来源：https://stackoverflow.com/questions/11881265/html5-drawimage-slow-on-chrome