表现 – 效率和

我想问一个有人可以给我一些提示,我想做一个设计决定.

我的项目将会有一些精灵(期待在屏幕上一次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

看到测试和结果(从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仍然比较慢,而且工作量也更大.

原文地址：https://www.jb51.cc/css/214734.html