当 lineWidth 未设置为 1 时，HTML Canvas 的行位置不正确

Question

  function drawModule() {
    const lineWidth = 1
    context.lineWidth = lineWidth
    context.translate(0.5, 0.5)

    for (let k = 0; k < self.geometryParsed.length; k++) {
      const geometry = self.geometryParsed[k].geom
      const type = self.geometryParsed[k].typ

      context.beginPath()
      context.strokeStyle = self.unitMixTable[type]
      context.moveTo(
        Math.round(geometry[0].x),
        Math.round(geometry[0].y)
      )
      for (let i = 1; i < geometry.length; i++) {
        context.lineTo(
          Math.round(geometry[i].x),
          Math.round(geometry[i].y)
        )
        context.stroke()
      }
      context.closePath()
      context.fillStyle = 'white'
      context.fill()
    }
    context.translate(-0.5, -0.5)
  }

这是我用来在 canvas 中绘制一些多边形的代码，它按预期工作没有问题。但是当 lineWidth 为 2 时，线条的位置和不透明度会稍微扭曲。

结果图片：

线宽 = 1

线宽 = 2

如图中红圈所示，lineWidth 为 2 时，即使共享相同的 x 点，线条也不会对齐。并且在每组最右边的矩形中，线条的颜色是不一样的。

可能是什么问题？我有什么想念的吗？提前致谢！

重现：https://codepen.io/coldsewoo/pen/mdeZBev

Answer 1

填充是你问题的根本原因

const geometryParsed = [
  {
    geom: [{ x:78, y:132 }, { x:59, y:132 }, { x:59, y:183 }, { x:78, y:183 }, { x:78, y:132 }]
  },
  {
    geom: [{ x:97, y:132 }, { x:78, y:132 }, { x:78, y:166 }, { x:97, y:166 }, { x:97, y:132 }]
  },
];

const canv = document.getElementById("canvas");
const context = canv.getContext("2d");

context.translate(-50, -100)
context.lineWidth = 2;
for (let k = 0; k < geometryParsed.length; k++) {
  const geometry = geometryParsed[k].geom;
  context.beginPath();
  context.moveTo(geometry[0].x, geometry[0].y);
  for (let i = 1; i < geometry.length; i++) {
    context.lineTo(geometry[i].x, geometry[i].y);    
  }
  context.stroke();
}

context.translate(80, 0)
context.lineWidth = 4;
for (let k = 0; k < geometryParsed.length; k++) {
  const geometry = geometryParsed[k].geom;
  context.beginPath();
  context.moveTo(geometry[0].x, geometry[0].y);
  for (let i = 1; i < geometry.length; i++) {
    context.lineTo(geometry[i].x, geometry[i].y);
  }
  context.stroke();
  context.fillStyle = "white";
  context.fill();
}

<canvas id="canvas" width="476px" height="170px"></canvas>

当 lineWidth 未设置为 1 时，HTML Canvas 的行位置不正确

Incorrect line position with HTML Canvas when lineWidth is not set to 1

html

javascript

drawing

canvas