Javascript 线宽未设置为1时，HTML画布的行位置不正确 函数drawModule（）{ 常数线宽=1 context.lineWidth=线宽 上下文。翻译（0.5，0.5） for（设k=0；k

下面是我用来在画布上绘制一些多边形的代码，它可以正常工作。但是，例如，当线宽为2时，线的位置和不透明度会略微扭曲

结果图片：

线宽=1

线宽=2

当线宽为2时，可以在图的红色圆圈中看到，这些线即使共享相同的x点，也不会对齐。在每组最右边的矩形中，线条的颜色不一样

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

---

复制：

填充是问题的根本原因

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（设k=0；k

---

填充是问题的根本原因

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（设k=0；k

---

你得到了一些

数学圆（

在您的代码中，您确定他们共享相同的内容吗point@HelderSepulveda/应该是这样的，左右矩形在数组中具有完全相同的x坐标。试图删除代码中的所有Math.round内容，但没有任何结果changed@HelderSepulveda对不起，我的英语很差，我的意思是它们完全一样。删除最后的翻译（-.5，-.5），这只适用于线宽1。@Kaido您的[duplicate]没有解决对齐问题。您得到了一些

Math.round（

在您的代码中，您确定他们共享相同的内容吗point@HelderSepulveda/应该是这样的，左右矩形在数组中具有完全相同的x坐标。试图删除代码中的所有Math.round内容，但没有任何结果changed@HelderSepulveda对不起，我的英语很差，我的意思是它们完全一样。删除最后的翻译（-.5，-.5），这只适用于线宽1。@Kaido您的[duplicate]没有解决对齐问题

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