画布绘制的线条太粗

Question

我想在每48px高的画布元素上绘制线条。这是我的代码（包括一个小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高。我所有的其他线路都更高。结果如下：

result http://ghentgators.be/test/canvas_line_heightnotcorrect.JPG

Answer 1

将您的初始Y更改为+0.5（或-0.5），您将获得更好的线条。