HTML5グラフィック Canvas

canvas要素

canvas要素は、Webページにグラフィックを描画するための簡単で強力な方法を提供する。この要素はグラフィックのためのコンテナ(container)としての役割だけを持つ。したがって、実際にグラフィックを描画するには、JavaScriptなどのスクリプト言語を使用する必要がある。

canvas要素に対応している主要Webブラウザーのバージョンは次のとおりである。

canvas要素の属性

canvas要素は、Webページ内にある、境界線(border)もコンテンツ(content)もない単純な長方形の領域である。そのため、必ずstyle属性を使ってキャンバスのサイズを設定する必要がある。

スクリプト(script)からcanvas要素にアクセスするには、その要素のid属性を使用すればよい。

例

<canvas id="drawCanvas" style="width:300px; height:200px; border: 1px solid #993300;">
    この文は、ユーザーのWebブラウザーがcanvas要素に対応していないときに表示されます。
</canvas>

四角形を描く

キャンバスを定義した後は、スクリプトを使ってcanvas要素にグラフィックを描画できる。

次の例は、スクリプトを使ってcanvas要素に四角形を描く例である。

例

context.strokeRect(10, 10, 250, 130);
context.fillStyle = "rgba(255,0,0,1)";
context.fillRect(20, 20, 200, 100);
context.clearRect(30, 30, 150, 50);

上の例で四角形を描くために使われた関数は、次の順序で引数を受け取る。

1. 四角形の左上頂点のx座標
2. 四角形の左上頂点のy座標
3. 四角形の幅
4. 四角形の高さ

四角形を描くために使用するスクリプト関数は次のとおりである。

線を描く

次の例は、スクリプトを使ってcanvas要素に線を描く例である。

context.moveTo(0, 0);
context.lineTo(300, 100);
context.lineTo(150, 150);
context.stroke();

線を描くために使用するスクリプト関数は次のとおりである。

例

このような線描画を利用すると図形を作ることもでき、作成した図形に色を塗ることもできる。

context.moveTo(0, 0);
context.lineTo(300, 200);
context.lineTo(150, 0);
context.lineTo(0, 0);
context.fillStyle = "#0099FF";
context.fill();
context.stroke();

上の例では、まずmoveTo()関数とlineTo()関数を使って線描画で図形を作る。その後、fillStyle()関数で目的の色を指定し、fill()関数を使って作成した図形に色を塗る。

円を描く

次の例は、スクリプトを使ってcanvas要素に円を描く例である。

例

context.beginPath();
context.arc(150, 100, 50, 0, 2 * Math.PI);
context.stroke();

上の例で使用されたarc()関数は、次の順序で引数を受け取る。

1. 円の中心x座標
2. 円の中心y座標
3. 円の半径
4. 円弧の描画を開始する角度
5. 円弧の描画を終了する角度

円を描くために使用するスクリプト関数は次のとおりである。

例

このような円の描画を利用すると、円弧も簡単に作れる。

context.beginPath();
context.moveTo(100, 100);
context.arc(100, 100, 120, 0, 45 * Math.PI / 180);
context.closePath();
context.stroke();

Math.PIは円周を直径で割った比率、つまり円周率の値で、およそ3.14159を表す。

テキスト(text)を描く

次の例は、スクリプトを使ってcanvas要素にテキストを描く例である。

例

context.font = "40px Arial";
context.fillText("CANVAS", 50, 90);
context.strokeText("HTML5", 80, 150);

上の例でテキストを描くために使われた関数は、次の順序で引数を受け取る。

1. canvas要素に描くテキストの内容
2. テキストの左上頂点のx座標
3. テキストの左上頂点のy座標

テキストを描くために使用するスクリプト関数は次のとおりである。

グラデーション(gradient)を描く

次の例は、スクリプトを使ってcanvas要素に線形グラデーションを描く例である。

例

var gradient = context.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "#FFCC00");
gradient.addColorStop(1, "#FFCCCC");
context.fillStyle = gradient;
context.font = "45px Arial black";
context.fillText("CANVAS", 15, 120);

上の例で使用されたcreateLinearGradient()関数は、次の順序で引数を受け取る。

1. 線形グラデーションが始まる点のx座標
2. 線形グラデーションが始まる点のy座標
3. 線形グラデーションが終わる点のx座標
4. 線形グラデーションが終わる点のy座標

このようにcreateLinearGradient()関数を使って線形グラデーションを生成する。このときaddColorStop()関数を使うと、グラデーションに使う色を指定できる。また、生成したグラデーションはfillStyleまたはstrokeStyle属性を使って描画できる。

次の例は、スクリプトを使ってcanvas要素に円形グラデーションを描く例である。

例

var gradient = context.createRadialGradient(100, 100, 200, 150, 150, 30);
gradient.addColorStop(0, "black");
gradient.addColorStop(1, "white");
context.fillStyle = gradient;
context.fillRect(0, 0, 300, 300);

上の例で使用されたcreateRadialGradient()関数は、次の順序で引数を受け取る。

1. 円形グラデーションが始まる円の中心x座標
2. 円形グラデーションが始まる円の中心y座標
3. 円形グラデーションが始まる円の半径
4. 円形グラデーションが終わる円の中心x座標
5. 円形グラデーションが終わる円の中心y座標
6. 円形グラデーションが終わる円の半径

グラデーション(gradient)を描くために使用するスクリプト関数は次のとおりである。

createLinearGradient()関数とcreateRadialGradient()関数はInternet Explorer 8以前ではサポートされません。

画像を描く

次の例は、スクリプトを使ってcanvas要素に画像を描く例である。

例

<p><button onclick="drawImage()">画像を描く</button></p>
...
<script>
    function drawImage() {
        var srcImg = document.getElementById("Monalisa");
        context.drawImage(srcImg, 10, 10);
    }
</script>

上の例で使用されたdrawImage()関数は、次の順序で引数を受け取る。

1. canvas要素に描く画像のアドレス
2. 画像の左上頂点のx座標
3. 画像の左上頂点のy座標

画像を描くために使用するスクリプト関数は次のとおりである。