在矩形内以一定角度绘制对角线

Question

我正在尝试用 30 度角的对角线填充一个矩形，该矩形不会被画布剪裁。每条线都应该在画布的边缘开始和结束，但不要超出画布。

我已经得到了一些结果，但我正在努力理解如何修复两端以使线条均匀分布：

这是我目前得到的代码：

const myCanvas = document.getElementById("myCanvas");
const _ctx = myCanvas.getContext("2d");
const canvasWidth = 600;
const canvasHeight = 300;

// Helper function
const degToRad = (deg) => deg * (Math.PI / 180);

const angleInDeg = 30;
const spaceBetweenLines = 16;
const lineThickness = 16;


_ctx.fillStyle = `black`;
_ctx.fillRect(0, 0, canvasWidth, canvasHeight);


const step = (spaceBetweenLines + lineThickness) / Math.cos(angleInDeg * (Math.PI / 180));

for (let distance = -canvasHeight + step; distance < canvasWidth; distance += step) {
  let x = 0;
  let y = 0;
  
  if(distance < 0) {
    // Handle height
    y = canvasHeight - (distance + canvasHeight);
  } else {
    // Handle height
    x = distance;
  }

  const lineLength = canvasHeight - y;
  const slant = lineLength / Math.tan(degToRad((180 - 90 - angleInDeg)));
 
  const x2 = Math.min(x + slant, canvasWidth);
  const y2 = y + lineLength;

  _ctx.beginPath();
  _ctx.moveTo(x, y);
  _ctx.lineTo(x2, y2);

  _ctx.lineWidth = lineThickness;
  _ctx.strokeStyle = 'green';
  _ctx.stroke();
}

和a JSFiddle for the code。

我想要实现的是绘制一个可以控制线条角度的图案，并且线条不会被画布剪裁。参考照片（线端没有平面）：

有什么帮助吗？

我的示例是用 Javascript 编写的，但它更像是我试图理解的逻辑。所以我愿意接受其他语言的建议/示例。

更新 1 如果线条的角度为 45 度，您将看到左侧的排水沟变得正确。所以我怀疑在计算步数时我需要做一些不同的事情。

我当前的代码基于this answer。

Answer 1

也许可以试试这样的方法来画线

for(var i = 0; i < 20; i++){
   _ctx.fillrect(i * spaceBetweenLines + lineThickness, -100, canvas.height + 100, lineThickness)
}