クイックスタート: キャンバスへの描画 (HTML)

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

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

キャンバス要素は、ページ上に四角形のビットマップキャンバスを作成します。このキャンバスには、JavaScript を使って簡単にグラフィックイメージを描画できます。キャンバスは、ゲームを作成するときや、グラフィックスをリアルタイムで生成したり一定の間隔で変更したりするような状況で役立ちます。

このクイックスタートは次のセクションで構成されます。

必要条件
キャンバス要素
レンダリングコンテキスト
四角形の描画
パスの使用
円弧の描画
曲線の描画
二次曲線
ベジエ三次曲線
次のステップ

必要条件

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

キャンバス要素

キャンバス要素は、ページ上に四角形のビットマップキャンバスを作成します。このキャンバスには、JavaScript を使って簡単にグラフィックイメージをレンダリングできます。

キャンバス要素には、幅と高さの属性があります。どちらも省略可能であり、ドキュメントオブジェクトモデル (DOM) プロパティを使って設定できます。幅および高さの属性を設定しない場合、キャンバスは、幅が 300 ピクセルで高さが 150 ピクセルの既定のサイズで表示されます。

<canvas id="canvas" width="150" height="150"></canvas>

id 属性はキャンバス要素の一部ではなく、スクリプト内でキャンバス要素を識別するために使われています。

キャンバスのサイズは、カスケードスタイルシート (CSS) を使って設定できます。既定では、アプリはキャンバス要素を内容も境界線もなしでレンダリングします。つまり、完全に透明となります。ただし、余白、境界線、背景などを指定して、通常の画像と同じようにスタイルを適用できます。スタイルを適用しても、キャンバス上の実際の描画には影響はありません。

レンダリングコンテキスト

アプリにキャンバス要素を追加すると、単に透明の描画面が作成されます。キャンバスに描画するには、キャンバスからレンダリングコンテキストを取得し、それを使って描画します。レンダリングコンテキストにはいくつかの種類があり、それぞれ異なる方法で描画できます。たとえば、2D グラフィックス用の 2D コンテキストや 3D グラフィックス用の 3D コンテキストがあります。このトピックの例では、2D レンダリングコンテキストを使います。

レンダリングコンテキストを取得するには、次の例に示すように、キャンバスの getContext メソッドを呼び出します。

var canvas = document.getElementById("quickstart");
var context = canvas.getContext("2d");

この例では、最初に getElementById を使ってキャンバス DOM ノードを取得してから、getContext メソッドを使ってレンダリングコンテキストにアクセスします。getContent メソッドには、コンテキストの種類を指定する 1 個のパラメーターがあります。この例では、"2d" を指定します。

レンダリングコンテキストを取得した後は、それを使って描画できます。以降のセクションでは、各種の図形を描画する方法を説明します。

四角形の描画

キャンバス上に四角形を描画するのに使われる関数は、2 つあります。

fillRect

fillRect (x, y, width, height)

このメソッドは、塗りつぶされた四角形を描画します。

パラメーター x および y は、キャンバス上で四角形を配置する座標で、キャンバスの左上隅からの相対値です。幅と高さはピクセル単位で指定します。
strokeRect

strokeRect(x, y, width, height)

strokeRect のパラメーターは、fillRect のパラメーターと同じです。ただし、strokeRect では、四角形の輪郭だけが描画されます。

次のメソッドは、指定した図形に色を付けます。

fillStyle

fillStyle = color

fillStyle メソッドは、1 個のパラメーターを使って、図形を色で塗りつぶします。色は、RGB、定義済みの色 ("red"、"blue" など)、16 進数の色、またはグラデーションを使って設定できます。fillStyle の例については、後の四角形の描画の例をご覧ください。

次のメソッドは、指定された領域をクリアして、完全に透明にします。

clearRect

clearRect(x, y, width, height)

fillRect および strokeRect メソッドと同様に、clearRect のパラメーター x および y はクリアする四角形領域の位置を指定し、width および height は四角形の幅および高さを設定します。

例

最初の例では、キャンバスを作成し、2 個の塗りつぶされた正方形を描画します。1 つは金色の正方形、もう 1 つは透明な紫色の正方形です。CSS を使って、キャンバスの周りに黒い境界線を作成します。

2 個の塗りつぶされた正方形。

この例では、最初に HTML の <body> でキャンバス要素を宣言します。キャンバス要素には "canvas" という id 属性が割り当てられ、要素の高さおよび幅属性は 100 ピクセルに設定されます。

<body>
   <canvas id="canvas" width="100" height="100" />
</body>

CSS を使って、幅が 1 ピクセルである単色の黒の境界線が作成されます。ファイルの読み込みをできるだけ効率的にするために、CSS は外部ファイルに記述しておきます。

/* style the canvas element with a black border. */
canvas { border: 1px solid black; }

キャンバスに 2 個の塗りつぶされた四角形を描画する JavaScript コードも、外部ファイルに記述します。このコードは、draw 関数を呼び出す window.onload イベントハンドラーを使って、HTML ドキュメントの読み込み後に開始されます。

window.onload = draw;

draw メソッドは、getElementById メソッドを使ってキャンバス要素を取得します。その後、getContext メソッドを呼び出して、描画コンテキストを取得します。 getContext メソッドには、文字列 "2d" を渡す必要があります。

すべてのキャンバスには、描画コンテキストがあります。描画コンテキストは、すべての描画メソッドとプロパティが定義される場所です。

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D drawing context.
var context = canvas.getContext("2d");

最初の正方形の描画を開始するために、fillStyle に色を設定します。四角形を塗りつぶすには、いくつかの方法があります。この例では、金色に相当する RGB を使っています。

context.fillStyle = "rgb(255, 215, 0)";

fillStyle は、次のような方法でも設定できます。

利用できる場合は、"yellow"、"orange"、"purple" などの定義済みの色を使うことができます。

context.fillStyle = "gold";
または、#RRGGBB という形式の色の 16 進表記を使います。

context.fillStyle = "#FFD700";

この 16 進数は、濃い金色です。
通常の色とは異なりますが、fillStyle にはグラデーションを使うこともできます。
```
var myGradient=context.createLinearGradient(20, 20, 100, 0);

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

context.fillStyle = myGradient;
```
この例では、線状のグラデーションを作成し、カラーストップを設定して、金色から白へと変化する色で四角形を描画します。
既定の fillStyle は、単色の黒です。

次は、fillRect メソッドを使って、実際に四角形を描画します。fillRect では、四角形の左上の X 座標と Y 座標を (15, 15) に設定して、塗りつぶされた四角形の描画を開始します。X 座標と Y 座標は、キャンバスの左上隅からの相対値です。四角形の幅と高さは、それぞれ 55 ピクセルと 50 ピクセルに設定します。

context.fillRect (15, 15, 55, 50);

2 つ目の四角形に対しては、fillStyle を紫色に相当する RGB 値に設定します。RGBA の 4 つ目の値 "A" はアルファを意味し、ここでは 0.5 に設定します。これは、色の透明度を決定します。有効なアルファ値は、0.0 (完全に透明) ～ 1.0 (完全に不透明) です。

context.fillStyle = "rgba(0, 0, 200, 0.5)"

fillRect では、四角形の左上の X 座標と Y 座標を (40, 40) に設定して描画を開始します。四角形の幅と高さは、それぞれ 45 ピクセルと 40 ピクセルに設定します。

context.fillRect (40, 40, 45, 40);

コード例の全体を次に示します。

これは、JavaScript コードです。この例では、このファイルに myJavascript.js という名前を付けます。

window.onload = draw;   

// This function is called on page load.
function draw() {

    // Get the canvas element.
    var canvas = document.getElementById("canvas");

    // Specify a 2d drawing context.
    var context = canvas.getContext("2d");

    // Set the color to the RGB equivalent of gold.
    context.fillStyle = "rgb(255, 215, 0)";

    // Draw the rectangle.
    context.fillRect (15, 15, 55, 50);

    // Set the color to the RGB equivalent of purple and
    // set the opacity of the rectangle to 50 percent.
    
    context.fillStyle = "rgba(0, 0, 200, 0.5)"

    // Draw the rectangle.
    context.fillRect (40, 40, 45, 40);
}

次に HTML ファイルを示します。

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

パスの使用

beginPath メソッドは、新しいパスを開始し、moveTo、lineTo、arc などの追加のメソッドを使って、直線、曲線、他の図形の組み合わせを描画します。

パスが作成されたら、fillStyle または strokeStyle メソッドを使ってパスをキャンバスにレンダリングできます。

例

この例では、茶色の三角形を描画します。

塗りつぶされた三角形

最初の例に使ったのと同じ HTML および CSS ファイルを使います。 JavaScript ファイル myJavascript では、同じ draw 関数を使い、HTML の読み込み後に呼び出します。

キャンバス要素を取得し、キャンバスの種類として 2D を指定した後、beginPath メソッドを呼び出すことで、茶色の三角形の描画を開始します。

context.beginPath();

内部では、パスは図形を形成するサブパス (直線、円弧など) のリストとして格納されます。beginPath メソッドを呼び出すたびに、このリストはリセットされ、新しい図形の描画を開始できます。

直線を描画する前には、moveTo 関数を呼び出す必要があります。 moveTo 関数自体は、何も描画しません。これは、三角形の描画を開始する位置にペンや鉛筆を配置するようなものです。

context.moveTo(28, 20);

moveTo には、X 座標と Y 座標の 2 個の引数があります。ここでは、X 座標を 28、Y 座標を 20 に設定しました。これらの座標は、描画するキャンバスの境界線からの相対値です。

次は、lineTo 関数を使って三角形の各直線を描画します。 moveTo 関数と同様に、lineTo 関数には X 座標と Y 座標の 2 個の引数があり、描画する直線の終点を示します。

context.lineTo(78, 50); 
context.lineTo(28, 78); 
context.lineTo(28, 20);

この例では、fillStyle プロパティを茶色の 16 進数値に設定します。「四角形の描画」で説明したように、fillStyle プロパティは RGB、16 進数の色、定義済みの色、またはグラデーションに設定できます。

context.fillStyle = "#996633";

ここでは、fillStyle を使って、三角形を単色の茶色で塗りつぶしています。 strokeStyle 関数を使って、図形の輪郭だけを描画することもできます。

次に、三角形を描画します。

context.fill();

JavaScript コードの全体を示します。

    // Get the canvas element.
    var canvas = document.getElementById("canvas");

    // Specify a 2-D canvas type.
    var context = canvas.getContext("2d");
           
    // Add the brown triangle.
    context.beginPath();
    context.moveTo(28, 20);
    context.lineTo(78, 50); 
    context.lineTo(28, 78); 
    context.lineTo(28, 20); 
          
    // Set the color to the hexadecimal equivalent of brown.
    // Omit this step and the triangle will render 
    // the default color of black.
    context.fillStyle = "#996633";

    // Draw the triangle.
    context.fill();

円弧の描画

円弧または円を描画するには、arc メソッドを使います。

context.arc(x, y, radius, startingAngle, endingAngle, antiClockwise);

このメソッドには、5 個のパラメーターがあります。

X と Y は、円の中心の座標です。
radius は、円の中心から円上の点までの距離です。
startingAngle と endingAngle パラメーターは、円弧の始点と終点をラジアン単位で定義します。これらは、X 軸からの角度です。
antiClockwise パラメーターはブール値で、true のときは円弧を反時計回りに描画し、false のときは時計回りに描画します。

例

この例では、青色の円を描画します。

青色の円

キャンバス要素を取得し、キャンバスの種類として 2D を指定した後、beginPath メソッドを呼び出すことで、円の描画を開始します。

context.beginPath();

前の四角形と三角形の例では、図形の塗りつぶしと色の指定に fillStyle 関数を使いました。この例では、RGB で青色を設定し、strokeStyle を使って円の輪郭だけを描画します。

// Define the stroke color in RGB for blue.
context.strokeStyle = "rgb(0, 162, 232)";

arc 関数は次のように定義されます。

// Define the circle using an arc.
context.arc(50, 50, 32, 0, 2 * Math.PI, true);

パラメーターは次のようになります。

X 座標と Y 座標により、円の中心を (50, 50) に設定します。
円の半径は 32 に設定します。
円の始点および終点は、それぞれ 0 と "2 * Math.PI" ラジアンに設定し、完全な円とします。
antiClockwise パラメーターは true に設定します。これは、完全な円を描画する場合にはそれほど重要ではありませんが、円弧の一部の場合は、明らかに重要です。

最後に、stroke 関数を使って、定義した円を描画します。

// draw the circle.
context.stroke();

1/2 の円弧 (0 から Math.PI まで) だけを描画した場合に、円がどのようになるかを次に示します。

// Define the circle using an arc.
context.arc(50, 50, 32, 0, Math.PI, true);

半分の円。

次に JavaScript コードを示します。このコードも、HTML ページの読み込み後に呼び出される draw 関数内に含まれます。 HTML または JavaScript ファイルの完全な例については、「四角形の描画」をご覧ください。

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
          
// Start the path.
context.beginPath();

// Define the stroke color in RGB for blue.
context.strokeStyle = "rgb(0, 162, 232)";

// Define the circle using an arc.
context.arc(50, 50, 32, 0, 2 * Math.PI, true);

// draw the circle.
context.stroke();

曲線の描画

曲線は、複雑な形状を描画するときに使われます。曲線には、ベジエ (三次) 曲線と quadratic (二次) 曲線の 2 種類があります。どちらもキャンバス上に始点と終点を持ちますが、曲線の描画方法は制御点に基づきます。quadratic 曲線には 1 個の制御点があり、三次ベジエ曲線には 2 個の制御点があります。曲線は、常にパスに含まれています。

二次曲線

quadraticCurveTo メソッドを次に示します。

quadraticCurveTo(cp1x, cp1y, X, Y)

4 個のパラメーターは、2 組の X 座標と Y 座標です。最初の cp1x と cp1y は曲線の制御点の位置であり、2 組目は曲線の終点の位置です。

他のすべての図形と同様に、曲線は moveTo(x, y) メソッドで開始されます。このメソッドは、曲線の始点の X 座標と Y 座標を指定します。

各端点から制御点に向かって、2 本の仮想的な接線が引かれます。この接線に沿って直線が移動することにより、曲線が描画されます。

二次制御点。

例

この例では、いくつかの quadraticCurveTo メソッドを使って、波状の基部を持つ抽象的な図形を描画します。制御点が終点に近いほど、波状の基部の曲線は小さくなります。

二次曲線。

最初に、キャンバス要素を取得し、キャンバスの種類として 2D を指定します。次に、beginPath メソッドを呼び出してパスを作成します。

context.beginPath();

そして、最初の曲線の始点の X 座標と Y 座標をそれぞれ 75 と 25 に設定します。

context.moveTo(75, 25);

各 quadratic 曲線は次のように設定します。

context.quadraticCurveTo(10, 80, 40, 130);
context.quadraticCurveTo(30, 90, 50, 130);
context.quadraticCurveTo(50, 100, 70, 130);
context.quadraticCurveTo(80, 110, 100, 130);
context.quadraticCurveTo(120, 120, 140, 130);

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

cp1x
制御点の X 座標。
cp1y
制御点の Y 座標。
x
曲線の終点の X 座標。
y
曲線の終点の Y 座標。

曲線を描画する順序は重要です。 1 つか 2 つの曲線を削除したり、描画する順序を変更したりして、曲線がどのような形状になるかを確認してみてください。

fillStyle を緑色の RGB 値に設定して、色を緑色に設定します。

context.fillStyle = "rgb(100, 200, 50)";

最後に、fill 関数で図形に色を塗ります。

context.fill();

この例および次の例では、キャンバスのサイズを 150 × 150 ピクセルに広げています。

<canvas id="canvas" width="150" height="150" />

例の全体を次に示します。

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
         
// Create the path.
context.beginPath();

// Set the starting point for the curve.
context.moveTo(75,25);

// Set each of the curves.        
context.quadraticCurveTo(10, 80, 40, 130);
context.quadraticCurveTo(30, 90, 50, 130);
context.quadraticCurveTo(50, 100, 70, 130);
context.quadraticCurveTo(80, 110, 100, 130);
context.quadraticCurveTo(120, 120, 140, 130);

// Set the color of the image to green.
context.fillStyle = "rgb(100, 200, 50)";

// Draw the image.
context.fill();

ベジエ三次曲線

bezierCurveTo メソッドを次に示します。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

6 個のパラメーターは、3 組の X 座標と Y 座標です。cp1x と cp1y は曲線の最初の制御点の位置、cp2x と cp2y は 2 番目の制御点の位置、3 組目は曲線の終点の位置です。

曲線は、moveTo(x, y) メソッドの X 座標と Y 座標で開始されます。

制御点から各端点に向かって、仮想的な接線が引かれます。図中の紫色の線で示されるように、これらの接線に沿って直線が移動することにより、曲線が描画されます。

三次制御点。

例

この例では、いくつかの bezierCurveTo メソッドを使って、波状の基部を持つ抽象的な図形を描画します。

三次曲線の例。

キャンバス要素を取得し、キャンバスの種類として 2D を指定した後、beginPath メソッドを呼び出すことで、パスを作成します。

context.beginPath();

そして、最初の曲線の始点の X 座標と Y 座標をそれぞれ 75 と 25 に設定します。

context.moveTo(75, 25);

各三次ベジエ曲線は次のように設定します。

context.bezierCurveTo(10, 100, 10, 122, 20, 130);
context.bezierCurveTo(20, 100, 20, 122, 30, 130);
context.bezierCurveTo(40, 100, 40, 122, 50, 130);
context.bezierCurveTo(70, 100, 70, 122, 80, 130);
context.bezierCurveTo(110, 100, 110, 122, 120, 130);
context.bezierCurveTo(160, 100, 160, 122, 170, 130);

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

cp1x
1 個目のベジエ制御点の X 座標。
cp1y
1 個目のベジエ制御点の Y 座標。
cp2x
2 個目のベジエ制御点の X 座標。
cp2y
2 個目のベジエ制御点の Y 座標。
x
曲線の終点の X 座標。
y
曲線の終点の Y 座標。

fillStyle を赤色の RGB 値に設定して、色を赤色に設定します。

context.fillStyle = "rgb(200, 0, 0)";

最後に、fill 関数で図形に色を塗ります。

context.fill();

この例では、キャンバスのサイズを 150 × 150 ピクセルに広げています。

<canvas id="canvas" width="150" height="150" />

コード例の全体を次に示します。

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");

// Create the path.
context.beginPath();

// Set the starting point for the curve.
context.moveTo(75, 25);
 
// Set each of the curves.
context.bezierCurveTo(10, 100, 10, 122, 20, 130);
context.bezierCurveTo(20, 100, 20, 122, 30, 130);
context.bezierCurveTo(40, 100, 40, 122, 50, 130);
context.bezierCurveTo(70, 100, 70, 122, 80, 130);
context.bezierCurveTo(110, 100, 110, 122, 120, 130);
context.bezierCurveTo(160, 100, 160, 122, 170, 130);

// Set the color of the image to red.
context.fillStyle = "rgb(200, 0, 0)";

// Draw the image.
context.fill();

次のステップ

このクイックスタートでは、キャンバス要素を追加して透明な描画面を作成し、CSS を使ってその周囲に境界線を作成し、JavaScript を使ってキャンバスにグラフィックイメージを描画しました。

fillRect と fillStyle を設定して四角形を描画できるように、キャンバス要素から 2D 描画コンテキストを取得しました。グラフィックスの色を指定するために、fillStyle を RGB、16 進数値、定義済みの色、グラデーションなど、さまざまな方法で設定しました。

beginPath メソッドで新しいパスを開始し、moveTo、lineTo、arc などの追加のメソッドを使って直線、円、曲線の組み合わせを描画する方法を理解しました。

パスが作成されたら、fillStyle または strokeStyle メソッドを使ってパスをキャンバスにレンダリングしました。

次は、キャンバスのグラフィックスをアニメーション化する方法と、グラデーションの作成方法について学習します。

キャンバスグラフィックスをアニメーション化する方法

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

クイック スタート: キャンバスへの描画 (HTML)

必要条件

キャンバス要素

レンダリング コンテキスト

四角形の描画

パスの使用

円弧の描画

曲線の描画

二次曲線

ベジエ三次曲線

次のステップ

その他のリソース

クイックスタート: キャンバスへの描画 (HTML)

レンダリングコンテキスト