你必须知道的10个提高Canvas性能技巧

你还在抱怨自己写的canvas demo徘徊在10帧以下吗？你还在烦恼打开自己写的应用就听见CUP风扇转吗？你正在写一个javascript Canvas库吗？那么下面九点就是你必须知道的！

一.预渲染

错误代码：

?
正确代码：

?
这里m_canvas的宽度和高度控制得越小越好。

二.尽量少调用canvasAPI

错误代码：

?
正确代码：

?

三.尽量少改变CANVAS状态

错误代码：

?
正确代码：

?

四.重新渲染的范围尽量小

错误代码：

?
正确代码：

?

五.复杂场景使用多层画布

?

六.不要使用阴影

?

七.清除画布

一般情况下：clearRect的性能优于fillRect优于canvas.width
= canvas.width;

八.像素级别操作尽量用整数

几种取整数的方法：

?

九.使用requestAnimationFrame制作游戏或动画

?

十.其他

与渲染无关的计算交给worker

复杂的计算交给引擎（自己写，或者用开源的），比如3D、物理

缓存load好的图片，canvas上画canvas,而不是画image