移动端设备及性能优化建议

实际上并不存在移动端Canvas这个概念，桌面端和移动端的Canvas具有相同的API。不过移动端设备一般功能都稍微欠缺，也相比较而言慢一些（这一点在旧版的桌面浏览器上也是类似的），所以当你制作Canvas应用时，考虑优化性能很重要。

减少绘制量

最有效的提高性能的方法就是减少绘制量。

• 不要绘制不需要显示的东西：如果你有四屏的信息，但是当前只需要显示一屏，那就不要绘制剩余的了。
• 多使用图像，少使用形状。如果你绘制的图形中有的不会伸缩甚至改变，那么考虑使用photoshop等工具把它们绘制为图像。一般说来，图像绘制到屏幕的速度比向量快很多。这一点在你有很多东西需要重复绘制时特别有效；
• 缓存会用到的不在屏幕上的Canvas，你可以在运行时创建canvas对象的新实例即使它们当前是不可见的。你可以把这些屏幕外的canvas当做缓存。当你的应用开始绘制图形到屏幕外的Canvas中时，可以通过复制来不断的绘制，这样的速度堪比绘制图片，但是你是在运行时产生的这些图片，如果需要你还可以更改它们；
• 图片伸缩，我们已经在很多地方使用Canvas了，我们可以对它们进行伸缩已实现不同的效果，大多Canvas运行工具对图片的伸缩和剪切进行过优化，所以一般说来这些操作也是很快的。同样有一些版本的drawImage函数允许你绘制一张图片的一部分。通过这些api，你也可以实现一些很有意思的效果。
• 只重绘你需要重绘的地方，你的程序也许是支持部分重绘的，比如说，我有一个球弹来弹去，我并不需要每一次都重新清楚背景重绘背景，我只需要每次清楚球的位置重新绘制球的位置即可；
• 绘制更少的帧：你应该像减少每帧绘制量那样减少帧的绘制次数。为了达到流畅的动画效果，你也许需要绘制100fps，但是大多数显示器的屏幕刷新率为60fps，所以多绘制帧也是没用的，用户根本就看不出效果，所以尽量使用requestAnimationFrame吧。
• 最好的绘制少的方法是不绘制，有的效果能用CSS实现，那就用CSS来做吧，使用CSS变换比使用JS操作Canvas要高效得多
• 使用像素对其：最后一个建议，在一些设备上使用让绘制的图像和形状与像素边缘对其有时候会有两到三倍的加速。