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

核心提示： 一.预渲染错误代码： var canvas = document.getElementById("myCanvas"); var context = this.canvas.getContext('2d'); var drawAsync = eval(Jscex.compil

 一.预渲染

错误代码：

　　  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的宽度和高度控制得越小越好。