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

这就是代码：

for（var xgrid=0；xgrid<（画布宽度/网格步长）；xgrid++）
{
ctx.moveTo（xgrid*grid_步，0）；
ctx.lineTo（xgrid*网格步距，画布高度）；
}
对于（变量ygrid=0；ygrid<（画布高度/网格步长）；ygrid++）
{
ctx.moveTo（0，ygrid*grid_步）；
ctx.lineTo（画布宽度，ygrid*grid_步）；
}

---

长话短说-添加网格后，在以较小的速度值进行渲染时注意到一些延迟（对于我来说，效果大致相同。我确信您不会真正注意到，只有1毫秒的差异

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

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

---

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

您的小提琴似乎根本不起作用。您必须将代码包含在文档的

标题中，而不是在DOM就绪时调用它事件：。这是JSFIDLE的问题，不是我的问题。在Chrome和Firefox上工作。是的，因为你没有正确设置小提琴。如果你包括一个演示，请确保它工作，否则，有什么意义？不是每个人都想花时间来修复你的演示以帮助你。我在评论中链接到了一个工作版本。我该怎么办o使用临时画布？同时使用
ctx.strokeRect（xgrid*grid\u步骤，0，grid\u步骤，canvashight）；
和
ctx.strokeRect（0，ygrid*grid\u步骤，canvashwidth，grid\u步骤）；
生成网格似乎更滞后。创建画布对象（或在html中隐藏另一个），在初始化时在其上绘制一次网格，然后在需要时将其内容绘制在可见的网格上。覆盖两个
canvas
元素并仅用轨迹重新绘制该元素也是一个解决方案。
  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);
  }