我想问一个有人可以给我一些提示,我想做一个设计决定.
我的项目将会有一些精灵(期待在屏幕上一次10到30),并有几种方法来实现它们.一种方法是css-Sprites,另一种方法是在画布上绘制它们.两者都不难.背景将是在后台由另一个< canvas>绘制的tile-map.
我看到Crafty将Sprites附加为÷ div>即在< canvas>之内的HTML中,作为css-Sprite.我不知道如果< div>是在画布上还是在画布上.有差别吗
我希望用户能够通过鼠标点击,左,右等与精灵进行交互.当然,这些精灵当然是站在或走在瓦片地图的元素上.那么为< canvas>编写一个处理程序是更有效的并找到精灵,或者使用< div>让浏览器处理这个发现？
我希望我可以沟通我的问题.
解决方法
我的测试显示纯粹的HTML CSS通常比画布更快：
Performance of moving image on web page via CSS vs HTML5 Canvas
Performance of moving image on web page via CSS vs HTML5 Canvas
看到测试和结果(从10个月前的浏览器)在这里：
http://phrogz.net/tmp/image_move_speed.html
具体来说,我有两个测试几乎与你的问题完全相同：
> 20 animated sprites using CSS
> 20 animated sprites using Canvas
总结FPS：
- Image Image Sprite Sprite
- Browser Canvas CSS Canvas CSS
- ----------------------------------------------
- Safari v5.0.3 59 95 59 89
- Firefox v3.6.13 59 95 60 90
- Firefox v4.0b8 75 89 78 82
- Chrome v8.0 108 230 120 204
- iPad,Horiz 17 44 2 14
- iPad,Vert 4 75 2 15
更新的浏览器通常要快得多(Chrome几乎总是在同一台机器上打上250fps的内部封顶),并且缩小差距,但是使用Canvas仍然比较慢,而且工作量也更大.
