在画布上画线，但最后的线褪色了

我正在尝试在黑色背景上绘制白线网格。

底部的 3 条水平线似乎已经褪色，直到我重新绘制它们，我不明白为什么会发生这种情况。有没有人见过这个和/或知道我做错了什么？

这是因为线条是在它们所在的所有像素上绘制的（在画布上定位是浮动的）。当你想在画布上用 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();
                }

这是一个用非常细而干净的线条演示的小提琴：

http://jsfiddle.net/dystroy/7NJ6w/ http://jsfiddle.net/dystroy/7NJ6w/

事实上，一条线是在它所经过的所有像素上绘制的，这意味着绘制宽度恰好为一个像素的水平线的唯一方法是以中间为目标。我通常在基于画布的应用程序中具有这种 util 函数：

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();
}

当然，您最好也对垂直线执行此操作，以获得美观​​的页面。