iOS HTML Canvas或CSS3 3D转换

Question

On the IOS platform:

The HTML5 canvas element is not hardware accelerated. CSS3 3D Transforms (example: translate3d ) are hardware accelerated.

Looking to create a 2d game for IOS using HTML/JavaScript with PhoneGap, should I consider using just the DOM with CSS3?

Has anyone tried this? Are there any benchmarks?

Answer 1

I also had this concern when building my own 2D game. I initially had problems with animation performance on iOS but I solved it with CSS3 3D transformations. I didn't try Canvas but I really didn't need to once the proper CSS was applied. And the performance remained good with PhoneGap under both iOS and Android versions. Some older Android devices are somewhat slow but I don't think Canvas would help with that either.

As for benchmarking, I did find this which shows both Canvas and CSS3 transitions with images: http://www.spielzeugz.de/html5/compare/

Answer 2

The accepted answer is actually extremely misleading, as are parts of the question. To set things straight:

• iOS 5 and up actually do use hardware acceleration for Canvas.
• The canvas is not pretty well designed, at all. Hardware acceleration only kicks in if you apply transforms. If you clear and redraw, even with requestAnimationFrame your performance may still very well be choppy. You are definitely going to notice differences.
• CSS3 transforms may yield better performance - for Android devices.

Answer 3

I made an attempt but lost interest. It seemed to be just as efficient as doing the same thing I was doing with canvases. You're not going to notice much difference unless you're doing heavy javascript calculations which you will probably be doing regardless of whether you use CSS3 or canvas.

I don't know of any benchmarks but you can read about it here: http://www.sencha.com/blog/apple-ios-5-html5-developer-scorecard/

It is also going to depend on which device you're talking about. They all run different hardware and slightly different software so that should affect your decision: http://www.codefessions.com/2012/03/how-fast-is-html5-canvas-part-2.html

Canvas is pretty well designed, in a way such that it isn't going to make much of a difference whether you hardware accelerate it or not, especially if you're just doing 2d stuff.