爲什麼我的線條顏色在html 5 canvas中逐漸變化？

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