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

Question

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

底部3条水平线看起来褪色，直到我重绘它们，我无法弄清楚为什么会发生这种情况。有没有人见过这个和/或知道我做错了什么？

Answer 1

这是因为在它们结束的所有像素上绘制了线条（在画布上的位置是浮动的）。当你想在画布上的javascript中绘制精确的垂直或水平线时，最好将它们放在一半中。

参见图示：第一条水平线的绘制位置为y，该线条模糊且宽。绘制第二条水平线，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/

在所有像素上绘制线条的事实意味着绘制宽度恰好为一个像素的水平线的唯一方法是以中间为目标。我通常在基于画布的应用程序中使用这种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();
}

当然，你最好还是为垂直线做一个好看的页面。

Answer 2

对我而言，它看起来并不褪色。也许这与你的操作系统或PC有关，它无法正确渲染绘图。我在Win 7上使用Chrome 20.测试它。

Answer 3

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

objContext.lineWidth = 2;

我不确定为什么最后一行会消失。 见http://jsfiddle.net/jSCCY/