Javascript 在画布中绘制线条，但最后的线条已褪色

我试图在黑色背景上画一个白线网格

---

在我重新绘制它们之前，底部的3条水平线似乎已褪色，我无法理解为什么会发生这种情况。以前有没有人见过这个，或者知道我做错了什么？

对我来说它看起来不褪色。也许这与操作系统或PC有关，因为它们无法正确渲染图形。我在Win7上使用Chrome20。测试它。

您必须像这样定义objContext.lineWidth：

objContext.lineWidth = 2;

我不知道为什么最后一行会褪色。

---

请参见

这是因为在画布上的所有像素上都画了线，而定位是浮动的。当您想在画布上用javascript绘制精确的垂直线或水平线时，最好使用半整数

请参见图：第一条水平线的y位置为1。这条线模糊而宽。第二条水平线的y位置为4.5。它薄而精确

例如，在您的代码中，我通过将水平线循环更改为以下方式获得了良好的结果：

                // Horizontal lines
                for (var i = 1; i < objCanvas.height / intGridWidth; i++)
                {
                    objContext.strokeStyle = "white";
                    var y = Math.floor(i*intGridWidth)+0.5
                    objContext.moveTo(0, y);
                    objContext.lineTo(objCanvas.width, y);
                    objContext.stroke();
                }

---

当然，为了有一个好看的页面，你最好对垂直线也这样做。

我使用的是Windows 7以及Chrome 18.0.1025.162 m。我还用最新的firefox试用过，但它仍然褪色。这有点帮助，但当我将它设置为一个id时，现在所有的行都褪色了。我希望这些线非常细。这就是我现在拥有的：太棒了！这太完美了。非常感谢，很抱歉没有尽快回复。

function drawThinHorizontalLine(c, x1, x2, y) {
    c.lineWidth = 1;
    var adaptedY = Math.floor(y)+0.5;
    c.beginPath();
    c.moveTo(x1, adaptedY);
    c.lineTo(x2, adaptedY);
    c.stroke();
}