1

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
4

1 回答 1

0

多年来我一直在为此苦苦挣扎。一个版本的 chrome 很好，下一个版本又慢了......我的最终解决方案有点 hacky，但它有效。

使用您的小提琴，我可以确定如果画布的大小 <= 256，性能会大幅下降。

我的画布是 200 x 200。

我只是将画布设置为 258 x 258，更改所有数学以适应新尺寸，并使用画布包装 div 上的 CSS 缩放属性将画布的外观缩小到近似原始大小。

这样做，我从 30-40 fps 到稳定的 60。

于 2017-12-22T01:28:12.117 回答