Canvas性能技巧:必须知道的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.

二.尽量少调用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);