色・グラデーションの指定
キャンバスに描画した図形に色を指定します。色はデフォルトでは黒となっています。また、色は透明度を指定することも可能です。色は0～255で指定し、透過度は0～1で指定します。透過度は0が透明で、1が不透明となります。
図形を描画する時は、strokeメソッドとfillメソッドを用いますが、色の指定にはstrokeStyleメソッドとfillStyleメソッドがあり、枠線の色を指定するか、塗りつぶす色を指定するかという違いがあります。
// 枠線の色の指定（赤の場合) strokeStyle = "rgb(255, 0, 0,)"; // 塗りつぶす色の指定（青の場合） fillStyle = "rgb(0, 0, 255)"; // 色と同時に透過度も指定（赤で半透明の場合） strokeStyle = "rgba(255, 0, 0, 0.5)"; // 透過度だけを指定（半透明の場合） globalAlpha = 0.5;
また、描画した図形にグラデーションを指定することもできます。まずcreateLinerGradientメソッドを使って、グラデーションの開始地点と終了地点を定義します。この時、(x0, y0)が開始地点で、(x1, y1)が終了地点を表します。その次に、createLinerGradientメソッドから得られるaddColorStopメソッドを用いて、グラデーションの終点のオフセットとその地点での色を指定します。オフセットは0から1の間で、好きな数だけセットする事ができます。そして最後に、塗りつぶしの場合はfillStyleメソッドに、以下の場合だとgradをセットし、図形を描画します。枠線の場合も同様に、strokeStyleメソッドにgradをセットします。。
// 開始地点と終了地点の定義（cxは描画コンテキスト） var grad = cx.createLinerGradient(x0, y0, x1, y1); // グラデーションの終点と、その地点での色の指定 grad.addColorStop(offset, color); // fillStyleメソッドにセットし、図形を描画する fillStyle = grad; fillRect(x, y, w, h);
また、円形のグラデーションを表現することもできます。基本的な使い方は通常のグラデーションと同じです。半径r0で中心座標が(x0, y0)の円を開始地点とし、半径r1で中心座標が(x1, y1)の円を終了地点とします。
// 円形グラデーション（cxは描画コンテキスト） var grad = cx.createRadialGradient(x0, y0, r0, x1, y1, r1); // グラデーションの終点と、その地点での色の指定 grad.addColorStop(offset, color);
サンプル
1つ目のサンプルは枠線と塗りつぶしの色の指定と、透過度の指定を行ったものです。枠線の場合はstrokeStyleメソッドに、塗りつぶしの場合はfillStyleメソッドに色の指定を行っています。また透過度の指定では、青い四角形の透過度を0.5に指定しているので、重なっている部分が透過されて見えます。
2つ目のサンプルは斜めにグラデーションをかけた四角形を描画したものです。色とオフセットを、緑（0）→青（0.5）→赤（1）と指定しています。よって、左上の緑から開始し、真ん中に青があり、右下の赤で終了しています。
3つ目のサンプルは、四角形に円形のグラデーションをかけたものです。基本的な使い方は通常のグラデーションと同じですが、四角形に円形のグラデーションを指定した場合、addColorStopで指定した色が、四角形の円以外の部分にも適用されていることに注意して下さい。
// 枠線の色の指定 cx.strokeStyle = "rgba(255, 0, 0, 1)"; cx.strokeRect(10, 10, 50, 50); // 塗りつぶしの色の指定 cx.fillStyle = "rgba(0, 0, 255, 1)"; cx.fillRect(70, 10, 50 ,50); // 透過度の指定 cx.fillStyle = "rgba(255, 0, 0, 1)"; cx.fillRect(80, 80, 50, 50); cx.fillStyle = "rgba(0, 0, 255, 0.5)"; cx.fillRect(110, 110, 50, 50);
// 変数gradに開始地点と終了地点を代入（左上から右下） var grad = cx.createLinearGradient(20, 20, 150, 150); // 変数gradのオフセットと色の指定（緑→青→赤） grad.addColorStop(0,"rgba(0, 255, 0, 1)"); grad.addColorStop(0.5,"rgba(0, 0, 255, 1)"); grad.addColorStop(1,"rgba(255, 0, 0, 1)"); // fillStyleメソッドに、変数gradを代入 cx.fillStyle = grad; // 図形の描画 cx.fillRect(20, 20, 150, 150);
// 変数gradに開始地点と終了地点を代入（左上から右下） var grad = cx.createRadialGradient(100, 100, 20, 100, 100, 50); // 変数gradのオフセットと色の指定（緑→青→赤） grad.addColorStop(0,"rgba(100, 200, 100, 1)"); grad.addColorStop(0.5,"rgba(100, 100, 200, 1)"); grad.addColorStop(1,"rgba(255, 200, 200, 1)"); // fillStyleメソッドに、変数gradを代入 cx.fillStyle = grad; // 図形の描画 cx.fillRect(25, 25, 150, 150);