开发者

Canvas draws lines too thick

I want to draw lines on my canvas element at every 48px high. Here's my code (a little jquery selector included since I a开发者_开发百科lso use 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;

What I experience is that my first line is crisp and 1px high. All my other lines are higher. Here's the result:

Canvas draws lines too thick

(source: ghentgators.be)


Change your initial Y to +0.5 (or -0.5) and you'll get nice lines.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜