模糊的线条HTML Canvas JavaScript

Question

我正在绘制五行组，但每组的五分之一总是显得模糊。这是结果：

这是我的JavaScript代码：

for (i=0; i<5; i++){
    context.moveTo(X, Y);
    context.lineTo(X + length, Y);
    context.stroke();
    Y += space; 
}

Answer 1

尝试Math.floor（）：坐标。

模糊图纸可能由带小数的坐标引起！

for (i=0; i<5; i++){
    context.moveTo( Math.floor( X ), Math.floor( Y ) );
    context.lineTo( Math.floor( X + length ) , Math.floor( Y ) );
    context.stroke();
    Y = Math.floor( Y + space ); 
}

无论如何..我自己无法重现这个问题，所以可能是浏览器或其他东西。

另外，您使用的是ctx.scale，ctx.translate还是ctx.transform？

Answer 2

更新它工作正常。如果这确实不起作用，您必须向我们提供更多详细信息。

((context) => {
  var length = 200, X = 10, Y = 10, space = 10;
  context.beginPath();
  for (i = 0; i < 5; i++) {
    context.moveTo(X, Y);
    context.lineTo(X + length, Y);
    Y += space;
  }
  context.stroke();
  context.closePath();
})(document.querySelector("#canvas").getContext("2d"));

canvas {
  background: #defcfa;
}

<canvas id="canvas" width="300" height="100"></canvas>

老答案：

试试这样：

context.beginPath();
for (i = 0; i < 5; i++) {
  context.moveTo(X, Y);
  context.lineTo(X + length, Y);
  Y += space; 
}
context.stroke();
context.closePath();