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