Canvas性能技巧:必须知道的Canvas性能技巧

核心提示： } context.fillStyle = COLOR2; for (var i = 0; i < STRIPES / 2; i++) { context.fillRect((i * 2 + 1) * GAP, 0, GAP, 480); }四.重新渲染的范围尽量小错误代码： context.fil

　　  }
　　  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  width="600" height="400" style="position: absolute; z-index: 0">
</canvas>
<canvas  width="600" height="400" style="position: absolute; z-index: 1">
</canvas>
六.不要使用阴影
　　  context.shadowOffsetX = 5;
　　  context.shadowOffsetY = 5;
　　  context.shadowBlur = 4;
　　  context.shadowColor = 'rgba(255, 0, 0, 0.5)';
　　  context.fillRect(20, 20, 150, 100);
七.清除画布
详细性能差别： 
http://simonsarris.com/blog/346-how-you-clear-your-canvas-matters
一般情况下：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) {