大家对HTML5比较熟悉不过的就是canvas画布，或许你在担心HTML5中canvas的性能，那么HTML5中canvas性能究竟怎样，你是否了解呢，其实HTML5中如果使用好的话，canvas性能也能有突飞的进步，那么下面为大家总结十点点讲解HTML5中性能使用技巧；

一.预渲染
错误代码：
      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;