如何在 HTML5 画布中从内部侧关闭路径-解网

问：

我正在尝试找到正确的方法来关闭在 HTML5 画布中绘制的线条路径。

这些线是从特定的点列表中绘制的，如果从路径的内侧观察，这些点的计算使线的长度始终为 100。

问题是，当我想关闭路径时，最后一行将是倾斜的：那么要对列表的第一个点和最后一个点进行哪些计算才能以我想要的方式关闭路径？

JSFiddle 带有点列表示例：https://jsfiddle.net/r7fndb0q/

function draw() {
  const lines = [
    [
      [20, 20],
      [120, 20]
    ],
    [
      [120, 20],
      [220, 20]
    ],
    [
      [225, 15],
      [225, 125]
    ],
    [
      [230, 130],
      [120, 130]
    ]
  ]
  const canvas = document.getElementById("canvas")
  if (canvas.getContext) {
    const context = canvas.getContext("2d")

    for (let i in lines) {
      context.beginPath()
      context.moveTo(lines[i][0][0], lines[i][0][1])
      context.lineTo(lines[i][1][0], lines[i][1][1])
      context.strokeStyle = "black"
      context.lineWidth = 10
      context.stroke()
    }

    // This is the line between last and first point with no calculations on them
    context.beginPath()
    context.moveTo(120, 130)  // what calculations to be made?
    context.lineTo(20, 20)  // what calculations to be made?
    context.strokeStyle = "black"
    context.lineWidth = 10
    context.stroke()
  }
}

draw();

<canvas id="canvas" width="500" height="500"></canvas>

实际结果：

预期结果（最后一行是手工绘制的）：

JavaScript HTML 画布

如何在 HTML5 画布中从内部侧关闭路径

How to close a path from the internal side in HTML5 canvas

评论