我正在为像素网格上的精灵设置动画。我有几种选择，每种都有优点和缺点。我有相当多的JavaScript经验（六年），但是没有这种经验。问题是我不知道每种选择的价格如何。
该精灵需要快速渲染，并且价格便宜，足以在运行碰撞检测的同时至少运行五个。
理想情况下，我想使用包装器内部的元素网格，为多维数组中的每个元素渲染颜色和Alpha通道。这里的主要优点是我可以运行逐像素碰撞检测并单击经过精灵的透明部分。对于任何基于图像的Sprite，即使单击透明像素，也会触发onClick事件（我必须做很多工作才能使点击通过透明像素，这可能会非常昂贵）。
下一个选项是使用CSS精灵。css-tricks.com/css-sprites/这很容易实现，但是如前所述，onClicks不会通过透明像素。我可能会强制使用它，但是同样，它可能会很昂贵，并且需要很多时间才能实现。
另一个选项是动画gif，但是它们很大，在色彩部门中受限制，并且难以在动画方面进行控制。我宁愿不去那里。
然后是html5 canvas元素，我对此不太了解，并且希望尽可能远离它。我不知道我的任何代码相对于canvas元素如何工作，而且我怀疑从长远来看，它是否可以满足我的要求。
那么哪种才是性能最好的呢？第一个（也是最可取的）会是可行的选择吗？还是我错过了什么？