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

【问题标题】：Drawing lines in canvas, but the last ones are faded在画布中绘制线条，但最后的线条已褪色
【发布时间】：2012-05-09 13:30:52
【问题描述】：

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

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

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

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

【讨论】：

我使用的是 Windows 7 以及 Chrome 18.0.1025.162 m。我也用最新的firefox试了一下，还是掉色了。

【解决方案2】：

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

objContext.lineWidth = 2;

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

【讨论】：

那种帮助，但是当我将它设置为一个 id 时，现在所有的行都会褪色。我希望线条非常细。这就是我现在拥有的：jsfiddle.net/jSCCY/7

【解决方案3】：

这是因为线是在它们所覆盖的所有像素上绘制的（在画布上定位是浮动的）。当您想在画布上使用 javascript 绘制精确的垂直或水平线时，最好将它们设置为半整数。

参见插图：第一条水平线是在 y 位置为 1 时绘制的。这条线模糊而宽。第二条水平线以 4.5 的 y 位置绘制。它又薄又精确。

例如，在您的代码中，通过将您的水平线循环更改为这样，我得到了很好的结果：

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

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

【讨论】：

太棒了！太棒了。非常感谢，很抱歉没有尽快回复。