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

一.预渲染

错误代码：

var canvas = document.getElementById("myCanvas"); var context = this.canvas.getContext('2d'); var drawAsync = eval(Jscex.compile("async", function () {     while (true) {         drawMario(context);         $await(Jscex.Async.sleep(1000));     } })) drawAsync().start();

正确代码：
    

var canvas = document.getElementById("myCanvas");     var context = this.canvas.getContext('2d');     var m_canvas = document.createElement('canvas');     m_canvas.width = 64;     m_canvas.height = 64;     var m_context = m_canvas.getContext('2d');     drawMario(m_context);     var drawAsync = eval(Jscex.compile("async", function () {         while (true) {             context.drawImage(m_canvas, 0, 0);             $await(Jscex.Async.sleep(1000));         }     }))     drawAsync().start();

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

二.尽量少调用canvasAPI

错误代码：

for (var i = 0; i < points.length - 1; i++) {          var p1 = points[i];          var p2 = points[i + 1];          context.beginPath();          context.moveTo(p1.x, p1.y);          context.lineTo(p2.x, p2.y);          context.stroke();      }

正确代码：

context.beginPath();       for (var i = 0; i < points.length - 1; i++) {           var p1 = points[i];           var p2 = points[i + 1];           context.moveTo(p1.x, p1.y);           context.lineTo(p2.x, p2.y);       }       context.stroke();

三.尽量少改变CANVAS状态

错误代码：

    

for (var i = 0; i < STRIPES; i++) {         context.fillStyle = (i % 2 ? COLOR1 : COLOR2);         context.fillRect(i * GAP, 0, GAP, 480);     }

正确代码：

    

context.fillStyle = COLOR1;     for (var i = 0; i < STRIPES / 2; i++) {         context.fillRect((i * 2) * GAP, 0, GAP, 480);     }     context.fillStyle = COLOR2;     for (var i = 0; i < STRIPES / 2; i++) {         context.fillRect((i * 2 + 1) * GAP, 0, GAP, 480);     }

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

错误代码：context.fillRect(0, 0, canvas.width, canvas.height); 
正确代码：context.fillRect(20, 20, 100, 100);

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

<canvas > </canvas> <canvas > </canvas>

六.不要使用阴影
    

context.shadowOffsetX = 5;     context.shadowOffsetY = 5;     context.shadowBlur = 4;     context.shadowColor = 'rgba(255, 0, 0, 0.5)';     context.fillRect(20, 20, 150, 100);

七.清除画布

详细性能差别： 

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

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

几种取整数的方法：
rounded = (0.5 + somenum) | 0;
rounded = ~ ~(0.5 + somenum);
rounded = (0.5 + somenum) << 0;

九.使用Jscex制作动画效果
   

var drawAsync = eval(Jscex.compile("async", function () {         while (true) {             context.drawImage(m_canvas, 0, 0);             $await(Jscex.Async.sleep(1000));         }     }))     drawAsync().start();

十.其他
与渲染无关的计算交给worker
复杂的计算交给引擎（自己写，或者用开源的），比如3D、物理
缓存load好的图片，canvas上画canvas,而不是画image