在处理多元素动效的时候用操作DOM的方法会严重占用内存，拖慢运行速度，所以应该用Canvas画布制作多元素的动效或者游戏。

Canvas是HTML5的新标签。用于绘制图像（通过脚本，通常是 JavaScript），不过，canvas元素本身并没有绘制能力（它仅仅是图形的容器）。

Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制。

我写了一个弹弓射鸟的游戏，用的是JavaScript+Canvas，里面包含大部分Canvas的用法，以及面向对象的JavaScript写法：

（手机扫一扫查看demo，我只写了touch事件，所以只能在手机上玩，或者电脑开发者模式模拟手机。）

项目 源码地址

该游戏优化过，即使出现超大量的元素也不会卡：

优化通过删除冗余对象、去除setInterval改为requestAnimationFrame作为定时器、还有就是规范的游戏的开发模式。

requestAnimationFrame作为定时器：

interval: function() {
     var $this = this;
     this.timer = requestAnimationFrame(function() {
         $this.render();
         //游戏时间用完结束
         if ($this.usedTime < $this.time) {
              $this.timer = requestAnimationFrame(arguments.callee);
         } else {
              $this.over();
         }
     });
}

只要学会了这个，并能自己亲手写出一个这样的游戏，那么你的canvas就可以了。