javascript - html5 Canvas 。模糊的线条

Question

以下代码片段在 Canvas 上绘制垂直线(1px 宽)。然而，有些线条看起来比其他线条更宽，有些很模糊，有些则正常。在不同的帖子中，我读到需要减去 0.5 px 或平移坐标。它不适用于我的情况。

我尝试使用按 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 的线宽或使用双倍大小的 Canvas 并使用 CSS 将其缩小到一半(在这些情况下由于重新采样/插值)，您会得到这种错觉。

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

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

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