HTML5 Canvas 制作动画

HTML5 Canvas 渐变

HTML5 Canvas渐変は、形状の塗りつぶしや線の色として使用できる色のパターンであり、単色ではありません。渐変は、色から色への色のパターンです。渐変には二つの種類があります：Linear（線形）とRadial（径向）

Canvas渐変は、形状の塗りつぶしや線の色として使用できる色のパターンであり、単色ではありません。渐変は、色から色への色のパターンです。以下にいくつかの例を示します:

1. の二つの種類の渐変があります:

2. Linear（線形）

Radial（径向）
線形渐変は水平、垂直または対角線の線形パターンを使用して色を変更します。
径向渐変は円形パターンを使用して色を変更し、内側から外側に色を変更します。

線形渐変

の二つの種類の渐変が本文で紹介されています。2線形渐変

var canvas = document.getElementById("ex1");
");2var context = canvas.getContext("
　　　　
var　x1　= 0;
var　y1　= 0;
var　x2　=　100;
var　y2　= 0;
d");1　= context.createLinearGradient(x1,　y1,　x2,　y2);

如前述の通り、線形渐変は線形パターンを使用して色を変更します。線形渐変を使用して、4createLinearGradient()関数は、D上下文関数を使用して線形渐変を作成するcreateLinearGradient()関数を提供します。以下はその例です:1、y1の引数が以下の通りです：x2、y2、x4にあります。1、y1から2、y2の引数が渐変パターンの方向と延伸を決定します。梯度は最初のポイントx
に延伸します。1およびx2。

　　　　var　x1　= 0;
　　　　var　y1　を用いて水平渐変を作成します。以下はその例です:2　=　100;
　　　　var　y2　= 0;
　　　　d");1　= context.createLinearGradient(x1,　y1,　x2,　y2);

を変更することで、y軸上の引数値のみを変更することで水平渐変を作成します。以下はその例です:1とy2を用いて垂直渐変を作成します。以下はその例です:

　　　　var　x1　= 0;1　= 0;
　　　　var　x2　= 0;2　=　100;
　　　　d");1　= context.createLinearGradient(x1,　y1,　x2,　y2);

を同時にxとyの引数を変更することで対角線渐変を作成します。以下はその例です:

　　　　var　x1　= 0;
　　　　var　y1　= 0;
　　　　var　x2　=　100;
　　　　var　y2　=　100;
　　　　d");1　= context.createLinearGradient(x1,　y1,　x2,　y2);

色停止

のaddColorStop()関数には、上記の例では渐変の色が表示されていません。渐変の色を設定するには、渐変オブジェクト上でaddColorStop()機能を使用できます。以下はその例です:

d");1　= context.createLinearGradient(0,0,100, 0,
0,0);139;rgb(255,　0,　0)');
0,0);1.addColorStop(139;rgb(　　0,　0,　0)');

の間にあります。2の各引数。最初の引数は、0から1の間の数字。この数字は、この色標が渐変領域の中でどの距離に配置されるかを示します。二つ目の引数は、色そのものであり、/までです。/の値が0から255の間の数字（1バイトを表します）。
上記の例では、2つの色標を追加しました。最初は赤色で、渐変の始点から設定されています（最初の引数の値が0です）。二つ目の色は黒で、渐変領域の終わりに設定されています（最初の引数が1）。
あなたはグラデーションに2つ以上の色標を追加することができます。これは3の色標の例:

d");1　= context.createLinearGradient(0,0,100, 0,
0,0);1.addColorStop(0　　,　'rgb(255,　0,　0)');
0,0);1.addColorStop(0.539;rgb(　　0,　0,　255);
0,0);1.addColorStop(1　　39;rgb(　　0,　0,　0)');

この例では、グラデーションの中央に青色が追加されています。したがって、グラデーションは赤から青にそして黒に滑らかに変化します。

グラデーションを塗りつぶ色や縁取りスタイルとして使用する

あなたはグラデーションを塗りつぶ色や筆跡スタイルとして使用することができます。ただし2DコンテキストfillStyleやstrokeStyle属性がグラデーションオブジェクトを指すように設定することでこの操作が完了します。これはその例です:

d");1　= context.createLinearGradient(0,0,100, 0,
0,0);1.addColorStop(0　　,　'rgb(255,　0,　0)');
0,0);1.addColorStop(0.539;rgb(　　0,　0,　255);
0,0);1.addColorStop(1　　39;rgb(　　0,　0,　0)');
context.fillStyle = linearGradient1;
context.strokeStyle = linearGradient1;

今、あなたはグラデーションを塗りつぶ色や縁取り色として使用することができます。これは二つの四角形を描画する例です-一つが塗りつぶされ、もう一つが縁取り（枠）されています:

<canvas id="ex2" width="500" height="125" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
0);/canvas>
<script>
var canvas = document.getElementById("ex2");
");2var context = canvas.getContext("
d");1　= context.createLinearGradient(0,0,100, 0,　//horizontal gradient
0,0);1.addColorStop(0　　,　'rgb(255,　0,　　　0)');
0,0);1.addColorStop(0.539;rgb(　　0,　0,　255)');
0,0);1.addColorStop(1　　39;rgb(　　0,　0,　　　0)');
, 0)

context.fillRect(101010context.fillStyle = linearGradient　100,
d");2　var linearGradient125,0,　225,0);　//horizontal gradient
0,0);2.addColorStop(0　　,　'rgb(255,　0,　　　0)');
0,0);2.addColorStop(0.539;rgb(　　0,　0,　255)');
0,0);2.addColorStop(1　　39;rgb(　　0,　0,　　　0)');
context.strokeStyle = linearGradient2;
context.strokeRect(125　10　10context.fillStyle = linearGradient　100,
0);/<

これはキャンバス上に描画した結果です:

グラデーショングラデーション範囲

重要なのはグラデーションの範囲を理解することです。グラデーションがxから 10にまで拡張されます。 110の場合、x値が10まで110の間のグラフィックだけがグラデーションカラーが適用されます。この領域外で描画されたグラフィックもグラデーションの影響を受けるが、グラデーションの最初または最後の色を使用して描画されます。
例えば、xから 15にまで拡張されます。35以上のとき、このグラデーションは青から緑への色変化を示します。x値が15と描画されたすべてのグラフィックは青色で描画されます。x値が35と描画されたすべてのグラフィックは緑色で描画されます。x値が15と35の間のグラフィックだけがグラデーションカラーを持つようになります。
これは上記のグラデーションを使用して描画したコードの例です。5の四角形を示す

<canvas id="ex3" width="500" height="250" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
0);/canvas>
<script>
var canvas = document.getElementById("ex3");
");2var context = canvas.getContext("
d");1　var linearGradient15= context.createLinearGradient(　350, 0,
0,0);139;rgb(0,　　　0,　255)');
0,0);1.addColorStop(139;rgb(0,　255linearGradient39;);
, 0)

context.fillRect(101013context.fillStyle = linearGradient　100,
context.fillRect(15context.fillStyle = linearGradient10　200,　100,
context.fillRect(36context.fillStyle = linearGradient10　13context.fillStyle = linearGradient　100,
context.fillRect(10context.fillStyle = linearGradient12context.fillStyle = linearGradient　15context.fillStyle = linearGradient　100,
context.fillRect(28context.fillStyle = linearGradient12context.fillStyle = linearGradient　15context.fillStyle = linearGradient　100,
0);/<

›15これがキャンバス上に描画時の結果です。x値が350から

この例では、グラデーション内でのみ使用されています2色を使用する場合、グラデーション内では効果が同じです。3色を使用する場合、効果は同じです。グラデーション範囲の外では、最初と最後の停止色のみを使用します。
グラデーションの度合いは、正確な色付けされた形状を理解するために重要です。多くの場合、形状に適したグラデーションを特定するために、各形状に対して特別にグラデーションを定義する必要があります。

放射状グラデーション

放射状グラデーションのタイプは、内部の色から一つまたは複数の他の色に広がる円形のパターンです。以下はいくつかのグラフィック例です：

放射状グラデーションは2円定義です。各円には中心点と半径があります。これはコード例です：

var　x1　=　100;　　　//　x　of　1.　circle　center　point
var　y1　=　100;　　　//　y　of　1.　circle　center　point
var　r1　=　30;　　　　//　radius　of　1.　circle
var　x2　=　100;　　　//　x　of　2.　circle　center　point
var　y2　=　100;　　　//　y　of　2.　circle　center　point
var　r2　=　100;　　　//　radius　of　2.　circle
var　radialGradient1　=　context.createRadialGradient(x1,　y1,　r1,　x2,　y2,　r2);
radialGradient139;rgb(0,　　　0,　255)');
radialGradient1.addColorStop(139;rgb(0,　255,　　　0)');
context.fillStyle　=　radialGradient;1;
context.fillRect(1010　200,　200);

ご覧の通り、二つの中心点（x1、y1およびx2、y2）そして、二つの半径（r1およびr2）これらはcreateRadialGradient()にパラメータとして渡されます。2Dコンテキストの機能。
異なる半径で二つの円を定義する必要がありますので、彼らは内円と外円（少なくとも大きさ）を引き起こします。その後、グラデーション内の色は一つの円からもう一つの円の円形に広がります。
色の目盛りは線形グラデーションと同様に動作します。彼らはグラデーションでどの色を使用するか、およびグラデーション範囲内にどの色を配置するかを定義します。
追加された色の目盛りは二つの円の間のどこかで一致します。例えば、色停止の最初の引数0は、色が最初の円から始まる場所から始まることを示しています。色停止の最初の引数1色は第二の円から始まる場所から始まることを示しています。
これはHTMLで5キャンバス上に描画時のコード例の結果です：

もし二つの円が同じ中心点を持っている場合、グラデーションは完全に円形で、色は内円から外円にグラデーションします。もし二つの円の中心点が異なる場合、グラデーションはより圆锥形に近く、ライトが表面に非直交的に当たるように見えます。これは似たような形状のコード例です：

var　x1　=　100;
var　y1　=　100;
var　r1　=　30;
var　x2　=　150;
var　y2　=　125;
var　r2　=　100;
var　radialGradient1　=　context.createRadialGradient(x1,　y1,　r1,　x2,　y2,　r2);
radialGradient139;rgb(0,　　　0,　255)');
radialGradient1.addColorStop(139;rgb(0,　255,　　　0)');
context.fillStyle　=　radialGradient;1;
context.fillRect(1010　200,　200);

これはキャンバス上で渐変を描画している様子です: