画布线表现得很奇怪

Question

我正在制作一个快速的JS片段，使用由对角线（SO COMPLEX！）组成的画布将背景绘制成div，这对我来说似乎很简单，但当我检查implementation时，线条似乎从底部切断约20％，其中一些似乎提前终止。

我的绘图功能相对简单：

function draw() {
  for(var j = 0; j <= canvas.width; j = j + gridPixelSize) {
      ctx.beginPath()
      ctx.moveTo(j, 0)
      ctx.lineTo(0, j)
      ctx.lineWidth = 1.5
      ctx.closePath()
      ctx.stroke()
  }
}

这是我第一次尝试使用Canvas，所以我不确定我做错了什么，非常感谢任何帮助！

（Bonus截图）

Answer 1

当您不隐藏画布时，您的问题的解释会变得明显：

如您所见，您不会在整个画布上绘制线条，并且画布不适合div，因此它会被水平裁剪并垂直重复。

1. 如果要更改画布的实际工作空间（以像素为单位），请不要使用CSS样式。这会影响输出，但不影响实际的内部分辨率。如果需要特定像素大小的画布，请在画布标记中定义宽度和高度：<canvas width="173" height="200"></canvas>
2. 使用j <= canvas.height + canvas.width在画布的完整大小上绘制线条。您可以通过不在画布空间之外绘制线条来改善性能，而是使用左上半部分和右下半部分的单独循环，但这会使代码更复杂。此外，我还获得了大多数浏览器中大多数非画布绘图实际上都是免费的经验。

这是an updated JSFiddle。