HTML5-5 __キャンバス: グラデーション

グラデーションは色に適用される描画メソッドです。

グラデーションを使用するには、次の 3 つの手順が必要です。

1. グラデーション オブジェクトの色を設定します。つまり、addColorStop( ) 関数、遷移方法を示す addColorStop 関数を使用すると、color と offset という 2 つのパラメータを指定できます。 color パラメータは、開発者がオフセット位置でストロークまたは塗りつぶすときに使用したい色を指します。 オフセットは 0.0 ～ 1.0 の値で、グラデーション ラインに沿った距離を表します

3 コンテキストの塗りつぶしスタイルまたはストローク スタイルのグラデーションを設定します。

グラデーションは、線に沿って色がゆっくりと変化するものと考えることができます。コードを参照してください

上記の線形に加えて、グラデーション、 Canvas は、指定した 2 つの円の間の円錐形の領域で色が滑らかに変化する放射状のグラデーションもサポートしています。

createRaddialGradient(

x

y0, r0、x1、y1、r1); 合計 6 つのパラメータがあります。最初の 3 つのパラメータは、中心が (x0, y0)、半径が r0 の円を表します。最後の 3 つのパラメータは、中心が (x1, y1)、半径が r1 の別の円を表します。グラデーションは 2 つの円の間の領域に表示されます 添付ファイル、画像