当 lineWidth 未设置为 1 时，HTML Canvas 的行位置不正确 [重复]答案

【问题标题】：Incorrect line position with HTML Canvas when lineWidth is not set to 1 [duplicate]当 lineWidth 未设置为 1 时，HTML Canvas 的行位置不正确 [重复]
【发布时间】：2020-09-16 02:00:58
【问题描述】：

  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)
  }

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

结果图片：

lineWidth = 1

lineWidth = 2

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

问题可能是什么？我有什么遗漏吗？提前致谢！

转载：https://codepen.io/coldsewoo/pen/mdeZBev

【问题讨论】：

你的代码中有一些Math.round(，你确定它们有相同的点
@HelderSepulveda / 应该是，左右矩形在数组中具有完全相同的 x 坐标。试图删除代码中所有 Math.round 的东西，没有任何改变
@HelderSepulveda / 对不起，我的英语很差，我的意思是它们完全一样。 codepen.io/coldsewoo/pen/mdeZBev
删除最后的 translate(-.5,-.5)，hacks 仅适用于 lineWidth 1。
@Kaiido 你的 [重复] 没有解决对齐问题

标签： javascript html canvas drawing

【解决方案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();
}

&lt;canvas id="canvas" width="476px" height="170px"&gt;&lt;/canvas&gt;

【讨论】：