模糊的线条HTML Canvas JavaScript

时间:2018-01-03 19:05:20

标签: javascript html canvas drawing

我正在绘制五行组,但每组的五分之一总是模糊不清。这是结果: enter image description here

这是我的JavaScript代码:

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

2 个答案:

答案 0 :(得分:0)

<强>更新 它工作正常。如果这不起作用,你必须向我们提供更多细节。

((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();

答案 1 :(得分:0)

尝试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?