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

时间:2013-05-21 01:57:15

标签: html5 html5-canvas

我想知道为什么垂直线条(笔画)正在减慢颜色的变化,几乎就像它们朝着末端倾斜一样

以下是我的意思,即使用HTML5 Canvas

的示例

http://jsfiddle.net/YyhxV/

感谢您的帮助

艾登

1 个答案:

答案 0 :(得分: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();