在画布上添加网格会带来一些延迟，优化吗？

Question

那是代码： http://jsfiddle.net/Mgq79/3/

  for (var xgrid = 0; xgrid < (canvasWidth / grid_step); xgrid++)
  {
    ctx.moveTo(xgrid * grid_step, 0);
    ctx.lineTo(xgrid * grid_step, canvasHeight);
  }
  for (var ygrid = 0; ygrid < (canvasHeight / grid_step); ygrid++)
  {
    ctx.moveTo(0, ygrid * grid_step);
    ctx.lineTo(canvasWidth, ygrid * grid_step);
  }

长话短说 - 在添加网格后，注意到在以小的速度值（<= 150m / s）渲染时有些滞后，而在接近1000m / s的上限时几乎是平滑的。那么如何优化这部分呢？

由于

ps链接已更新 还要注意，当轨迹为3或更多时，滞后非常明显

Answer 1

对我来说也是如此。它只有1毫秒的差异，我相信你无法真正注意到。

我真的想跳过一遍又一遍地绘制网格，我会让画布透明，并将网格作为画布容器的重复背景图像。

或者在临时画布上绘制一次然后使用drawimage，如果由于某种原因需要重绘它，只需将其移到画布上。

此外，您应该使用路径绘制图形而不是1x1矩形。在所有点都存在之后，路径可以完成。在每次迭代中绘制和填充矩形必然会很慢。