html - 为什么我的线条颜色在 html 5 画布中逐渐变化？

Question

我想知道为什么垂直线（笔划）正在减慢颜色的变化，就像它们正在向末端渐变一样

下面是我的意思的一个例子，这是使用HTML5 Canvas

http://jsfiddle.net/YyhxV/

谢谢你的帮助

艾登

Answer 1

代码的问题是每次在路径中添加一行时都会进行描边。

你的线有点细。然而，低于 1 的值是有效的 - 这将激活子像素化（非整数坐标也是如此）。

褪色是先前的线条被绘制在彼此之上的结果。由于它们是亚像素化的，因此会产生“褪色”效果，因为旧线比新线具有更多“混合”信息，这使得它们在外观上“更强”。

试试这个修改：（http://jsfiddle.net/YyhxV/2/）

//...
context.lineWidth= 0.2; //0.1 is a bit too thin, try cranking it up a bit
//...
for(var interval = 0; interval < 24; interval++)
{
    context.moveTo(interval*spacing+0.5,50);
    context.lineTo(interval*spacing+0.5,42); 
}

//move stroke outside
context.stroke();