javascript - Canvas /精确线描

Question

我目前正在使用 javascript 和 canvas。

我想绘制一个没有模糊线条的 1 像素边框。 我读过有关 0.5 px 翻译的内容。

var shift = 0.5;
if (x1 === x2) {
  var shiftX = shift;
  var shiftY = 0;
} else {
  var shiftX = 0;
  var shiftY = shift;
}

出了什么问题？ JSFiddle

为什么右下角少了一个像素？

Answer 1

这有效!!

ctx.line = function (x1, y1, x2, y2) {
    var shift = 0.5;

    if (x1 === x2) {
        var shiftX = x1 < 2 ? shift : -shift;
        var shiftY = 0;
    } else if (y1 === y2) {
        var shiftX = 0;
        var shiftY = y1 < 2 ? shift : -shift;
    } else {
        var shiftX = 0;
        var shiftY = 0;
    }

    ctx.translate(shiftX, shiftY);
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
    ctx.translate(-shiftX, -shiftY);
};

您尝试的问题是，太靠近边缘的像素可能会从 Canvas 上移出。此方法确保如果该点位于边缘的 2 个像素之内，则移位发生在远离边缘的方向。