グラデーションを作成する方法 (HTML)

[アーティクル]
03/04/2016

[ この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

図形や線の色は単色に制限されません。キャンバスで使われるグラデーションは、実際に色の値の 1 つです。このため、fillStyle プロパティと strokeStyle プロパティに適用できます。

グラデーションを使って、一定の方向に向かって画像の明るさや色を変化させることができます。これは、背景画像の作成、地図での高度提示など、1 つの面に明暗を付ける必要がある場合に便利です。

グラデーションを使うと、グラデーション効果のために画像を使う必要がなく、読み込みのために使う帯域幅が減り、時間も短縮できるため、Web アプリの効率化に役立ちます。また、プログラムで作成できるため、適用範囲の拡大や再利用も簡単です。

必要条件

このトピックを完了するには、JavaScript 用 Windows ライブラリのテンプレートを使う、JavaScript で開発する基本的な Windows ストアアプリの作成経験が必要です。JavaScript を使った Windows ストアアプリを初めて作成する場合は、「初めての Web アプリの作成」をご覧ください。WinJS テンプレートの使い方について詳しくは、「WinJS ツールキットの取得および使用方法」をご覧ください。

手順

ステップ 1: レンダリングコンテキストの取得

キャンバスに画像を描画し、グラデーションで画像に色を付ける前に、キャンバス要素からレンダリングコンテキストを取得する必要があります。レンダリングコンテキストは、すべての描画メソッドとプロパティが定義される場所です。

JavaScript を使った Windows ストアアプリのパフォーマンスを向上させるには、HTML ページが読み込まれてから JavaScript コードを実行します。これを実現するには、ページが読み込まれた後で呼び出される関数内に、画像を描画するコードを配置します。
```
window.onload = drawGradient;   

function drawGradient() {...
```
getElementById を使ってキャンバスのドキュメントオブジェクトモデル (DOM) ノードを取得し、getContext メソッドを使ってレンダリングコンテキストにアクセスします。

レンダリングコンテキストにはいくつかの種類があり、それぞれ異なる方法で描画できます。たとえば、2D グラフィックス用の 2D コンテキストや 3D グラフィックス用の 3D コンテキストがあります。このトピックの例では、2D レンダリングコンテキストを使います。
```
    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");
```

ステップ 2: グラデーションの作成

レンダリングコンテキストを取得すると、グラデーションを定義できます。グラデーションには、線状 (直線的な) グラデーションと放射状 (円形の) グラデーションの 2 種類があります。

Linear gradient

線状グラデーションメソッドでは、4 つの引数を使います。

createLinearGradient(startX, startY, endX, endY)

最初の 2 つの引数はグラデーションの開始点の位置を表す x と y、残りの 2 つの引数はグラデーションの終了点の位置を表す x と y です。

垂直な線状グラデーション

この例では、createLinearGradient メソッドを myGradient 変数に割り当てています。この操作を行うと、次の手順でグラデーションに色を追加するときに便利です。
```
var myGradient=context.createLinearGradient(0, 0, 200, 0);
```
縦方向の線状グラデーション (片側から反対側に向かって変化するグラデーション) を作成するには、グラデーションの開始位置の x と y をそれぞれ 0 と 0 に設定し、終了位置の x と y をそれぞれ 200 と 0 に設定します。y の値 (2 つ目と 4 つ目のパラメーター) が両方とも 0 であるため、グラデーションは左から右に向かって均一に変化します。
水平なグラデーション

上から下に向かって変化するグラデーションを作成するには、x の値 (1 つ目と 3 つ目のパラメーター) を一定の値にし、y の値 (2 つ目と 4 つ目のパラメーター) を 0 とキャンバスの高さの値にします。
```
var myGradient=context.createLinearGradient(0, 0, 0, 100);
```
対角線方向のグラデーション

対角線方向のグラデーションを作成することもできます。この例では、x と y の値を両方とも変化させ、それぞれ 200 と 100 に設定しています。
```
var myGradient=context.createLinearGradient(0, 0, 200, 100);
```

Radial gradient

createRadialGradient メソッドでは 6 つの引数を使います。

createRadialGradient(startX, startY, startRadius, endX, endY, endRadius)

パラメーターの定義は次のとおりです。

startX と startY はキャンバス上の x 座標と y 座標で、開始円の位置を表します。
startRadius は開始円の半径です。
endX と endY はキャンバス上の x 座標と y 座標で、終了円の位置を表します。
endRadius は終了円の半径です。

従来の放射状グラデーション

"従来の"放射状グラデーション (1 つの円からもう 1 つの円に向かって色が均一に変化する) を作成するには、両方の円の x 座標と y 座標を同じ値に設定し、グラデーションの片方の円がもう 1 つの円より大きくなるように設定する必要があります。
```
var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);
```
開始位置と終了位置が異なる場合

前に示した放射状グラデーションの例では、開始位置と終了位置の x 座標と y 座標を同じ値の 52 と 50 にそれぞれ設定し、それぞれの円の半径の大きさだけを 10 から 200 に増やしてありました。この場合、放射状グラデーションのシェーディングの中心は、円の中心になります。

開始位置と終了位置の間隔を広げると、キャンバス上に引き延ばされた円すい形状のグラデーションが完成します。
```
var myGradient = context.createRadialGradient(32, 30, 5, 60, 60, 50);
```
この例の開始円の x 座標と y 座標はそれぞれ 32 と 30、半径は 5 です。また、終了円の x 座標と y 座標はそれぞれ 60 と 60、半径は 50 です。結果は次のようになります。

ステップ 3: カラーストップの設定

グラデーションには 2 つ以上の addColorStop メソッドがあります。

addColorStop(offset, color)

カラーストップを追加するには、適用する色とグラデーション上のオフセット位置を指定する必要があります。グラデーション上の位置は、グラデーションの開始点を表す 0 からグラデーションの終了点を表す 1 までのどこでもかまいません。

この例では、myGradient var を使って addColorStop を 0 から 1 に設定し、白から黒に均一に変化するグラデーションを作成しています。

myGradient.addColorStop(0,"white");
myGradient.addColorStop(1,"black");

複数のカラーストップ

複数のカラーストップを使うことができます。この例では、2 つ目の addColorStop を使ってグラデーション上の中間点にカラーストップを割り当てています。
```
  myGradient.addColorStop(0,"orange");
  myGradient.addColorStop(.5, "green");
  myGradient.addColorStop(1, "blue");
```
グラデーションは次のようになります。

ステップ 4: 塗りつぶしスタイルの設定

グラデーションを描画する前に、fillStyle を myGradient に設定する必要があります。

context.fillStyle = myGradient;

最後に、fillRect メソッドを使ってイメージを描画します。

context.fillRect(0, 0, 200, 100);

完全な例

線状グラデーション

この JavaScript コードでは、キャンバス要素を使って四角形を描画し、四角形の fillStyle として対角線方向の線状グラデーションを使っています。

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");

    // Create a linear gradient.
    var myGradient=context.createLinearGradient(0, 0, 300, 100);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.
    context.fillStyle = myGradient;

    // Draw the rectangle.
    context.fillRect(0, 0, 200, 100);
}

放射状グラデーション

この JavaScript コードでは、キャンバス要素を使って円を描画し、円の fillStyle として放射状グラデーションを使っています。

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");
  
    // Create the radial gradient.
    var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.     
    context.fillStyle = myGradient;

    // Draw a circle.
    context.beginPath();
    context.arc(52, 50, 40, 0, Math.PI*2, true); 
    context.closePath();
    context.fill();
}

カスケードスタイルシート (CSS)

キャンバス要素の周りに灰色の境界線を作成するカスケードスタイルシート (CSS) の例を次に示します。

/* Style the canvas element with a grey border. */
canvas { border: 1px solid #c3c3c3; }

HTML ファイル

次の HTML ファイルでは、キャンバス要素が作成され、外部の JavaScript ファイルと CSS ファイルが使われます。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="myJavascript.js"></script>
        <link Rel="stylesheet" Href="myStyle.css" Type="text/css">
    </head>
    <body>
        <canvas id="canvas" width="200" height="100" />
    </body>
</html>

グラデーションを作成する方法 (HTML)

必要条件

手順

ステップ 1: レンダリングコンテキストの取得

ステップ 2: グラデーションの作成

ステップ 3: カラーストップの設定

ステップ 4: 塗りつぶしスタイルの設定

完全な例

関連トピック

その他のリソース

グラデーションを作成する方法 (HTML)

必要条件

手順

ステップ 1: レンダリング コンテキストの取得

ステップ 2: グラデーションの作成

ステップ 3: カラー ストップの設定

ステップ 4: 塗りつぶしスタイルの設定

完全な例

関連トピック

その他のリソース

ステップ 1: レンダリングコンテキストの取得

ステップ 3: カラーストップの設定