画布绘制线条太粗 [英] Canvas draws lines too thick

问题描述

我想在每48像素高的画布元素上绘制线条。这是我的代码（一个jquery选择器，因为我也使用jQuery）。

I want to draw lines on my canvas element at every 48px high. Here's my code (a little jquery selector included since I also 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;

我体验到的是，我的第一行是crisp和1px高。我所有的其他行更高。以下是结果：

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

推荐答案

将您的初始 Y 更改为+0.5（或-0.5）

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

这篇关于画布绘制线条太粗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！