html - Canvas 画线太粗

Question

我想在我的 Canvas 元素上每隔 48 像素高画一条线。这是我的代码(包括一些 jquery 选择器，因为我也使用 jQuery)。

var $canvas = $('canvas')
        , maxY = $canvas.outerHeight()
        , maxX = $canvas.outerWidth()
        , X = 0
        , Y = 0
        , ctx = $canvas.get(0).getContext('2d');

    ctx.strokeStyle = "rgb(100,0,0)";
    ctx.lineWidth = 1.0;
    ctx.lineCap = "round";
    while (Y < maxY) {
        ctx.beginPath();
        ctx.moveTo(X, Y);
        ctx.lineTo(maxX, Y);
        //ctx.closePath();
        ctx.stroke();
        Y += 48;
    };

    Y = 0;

我的经验是我的第一行很清晰，1px 高。我所有的其他线都更高。结果如下:

_{(来源:ghentgators.be)}

Answer 1

将您的初始 Y 更改为 +0.5(或 -0.5)，您将获得漂亮的线条。