html5画布。模糊的线条

Question

以下代码段在画布上绘制垂直线条（1px宽度）。然而，有些线条看起来比其他线条宽，有些线条模糊，有些线条可以。在不同的帖子中我读过，需要减去0.5像素或平移坐标。它在我的情况下不起作用。

我尝试使用翻译因子odf 0.5，舍入坐标并手动添加0.5（参见drawLine方法的变体）。什么都不行

如何让垂直线条清晰干净？

谢谢

function doStuff() {
  var cnv = document.getElementById("cnvs");
  var ctx = cnv.getContext("2d");
  var lw = 1;
  ctx.lineWidth = lw;
  var xMax = cnv.width;
  var ygMax = cnv.height;

  var iTranslate = 0.5; // (lw % 2) / 2;
  ctx.translate(iTranslate, iTranslate);

  deltaX = 12;

  for (var x = deltaX; x < xMax; x += deltaX) {
    drawLine(ctx, x, ygMax, x, 0);
  }
}

function drawLine(ctx, x0, y0, xf, yf) {
  ctx.beginPath();
  ctx.moveTo(x0, y0);
  ctx.lineTo(xf, yf);
  ctx.stroke();
  ctx.closePath();
}

function drawLine2(ctx, x0, y0, xf, yf) {
    ctx.beginPath();
    ctx.moveTo(Math.round(x0), y0);
    ctx.lineTo(Math.round(xf), yf);
    ctx.stroke();
    ctx.closePath();
}

function drawLine3(ctx, x0, y0, xf, yf) {
    ctx.beginPath();
    ctx.moveTo(x0 + 0.5, y0);
    ctx.lineTo(xf + 0.5, yf);
    ctx.stroke();
    ctx.closePath();
}

doStuff();

<canvas id="cnvs" width="200" height="100"></canvas>

Answer 1

代码中显示的行尽可能清晰。线条不能比一个像素更薄（这是我从Firefox和Opera中的代码中得到的）：

从这一点来说，你可以通过减少黑度来减少它们的幻觉。例如，如果您使用中灰色（＃777）颜色进行描边，它们将显示如下：

但它们的大小完全相同。

如果您使用0.5的线宽或使用双倍尺寸的画布并使用CSS将其缩小到一半（在这种情况下由于重新采样/插值），您会得到这种错觉。

附录：如果上图中的线条仍然看起来不均匀，则您的显示器设置可能不是最佳的，即。使用的分辨率与屏幕的物理像素不匹配。检查系统设置是否使用推荐的分辨率，因为任何其他设置都会强制在系统/硬件级别进行插值/重采样，无论您在画布中做什么都不会有帮助。

＆＃13;

＆＃13;

function doStuff() {
  var cnv = document.getElementById("cnvs");
  var ctx = cnv.getContext("2d");
  var lw = 1;
  ctx.lineWidth = lw;
  var xMax = cnv.width;
  var ygMax = cnv.height;

  var iTranslate = 0.5; // (lw % 2) / 2;
  ctx.translate(iTranslate, iTranslate);

  deltaX = 12;

  ctx.strokeStyle = "#777";
  
  for (var x = deltaX; x < xMax; x += deltaX) {
    drawLine(ctx, x, ygMax, x, 0);
  }
}

function drawLine(ctx, x0, y0, xf, yf) {
  ctx.beginPath();
  ctx.moveTo(x0, y0);
  ctx.lineTo(xf, yf);
  ctx.stroke();
}

doStuff();

＆＃13;

<canvas id="cnvs" width="200" height="100"></canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 2

最好将坐标舍入为整数，而不是每次都将值更改为0.5 - 例如x = Math.floor(x)（自动向下舍入）或x = Math.round(x)（对于更传统的舍入） ）。坐标可以按0.5以外的间隔关闭，这会使它们在您遇到时模糊渲染。