【JavaScript／JS】Canvasとは？【HTML5／使い方】

皆さんCanvasを使用したことはありますか？
今回はCanvasを使って、2Dの簡単な図形を描画する方法を紹介していきます。

Canvasとは？
HTMLの設定
描画コンテキストの取得
四角形を描画
線（パス）を描画
1. 関数
2. 実装
円（円弧）の描画
1. 関数
2. 実装
まとめ

Canvasとは？

Canvasとは、HTML5から追加された2Dの図形を描画するための技術です。
使い方としては、HTMLで要素を作成・IDを指定し、JavaScriptで描画する内容を実装します。
例として、グラフを描く、写真を合成する、シンプルなアニメーションを表現することができます。

HTMLの設定

HTMLでcanvasを設定します。
JavaScriptで指定するためにid=”canvas”を指定しています。
属性で幅(width)、高さ(height)を設定していますが、JavaScriptでも設定が可能です。

また、canvasブロック内で”代替コンテンツ”と設定していますが、
これはcanvasに対応しないブラウザやJavaScriptを無効にしている場合、代替コンテンツを出力しています。
代替コンテンツには、テキストや画像など設定することができます。

<body>
    <canvas id="canvas" width="500" height="500">代替コンテンツ</canvas>
</body>

描画コンテキストの取得

HTMLでCanvasを設定しましたが、そのままでは何も描画されません。
getContext関数で、コンテキストを取得することができます。

// HTMLの読込完了後に実行
window.onload = function () {
    // id='canvas'の要素を取得
    var canvas = document.getElementById('canvas');

    // 2次元の描画コンテキストを取得
    var ctx = canvas.getContext('2d');
}

getContext関数の第1引数にコンテキストの種類を指定することができます。
今回は2次元の描画コンテキスト（CanvasRenderingContext2D）を取得しています。
他の設定値は以下の通りです。

webgl
3次元グラフィックス描画（WebGL ver1）コンテキスト
（WebGLRenderingContext）を取得します。
webgl2
3次元グラフィックス描画（WebGL ver2）コンテキスト　　　　　　（WebGL2RenderingContext）を取得します。

WebGL・・・Web用のOpenGL（グラフィック専用のライブラリ）

これで描画する準備ができました。
次項目から実際に図形を描画してみましょう。

四角形を描画

まずは四角形を描画してみましょう。
こちらのプロパティと関数を使って描画することができます。

プロパティ

fillStyle・・・塗りつぶしのスタイルを設定（色・グラデーション・パターン値）
strokeStyle・・・境界線のスタイルを設定（色・グラデーション・パターン値）
lineWidth・・・境界線の幅を設定

関数

fillRect(x, y, width, height)・・・塗りつぶし状態の四角形を描画
strokeRect(x, y, width, height)・・・四角形の境界線を描画
clearRect(x, y, width, height)・・・指定範囲の四角形を消去し、透明になる

実装

それでは実際に描画してみましょう。
こちらがソースコードです。詳しい内容はコメントを記載しています。

<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    // 塗りつぶしの色を設定
    ctx.fillStyle = "#FFF3D9";
    // 塗りつぶされた状態の四角形を描画
    ctx.fillRect(25, 25, 120, 150);

    // 指定範囲の四角形を消去し、透明になる
    ctx.clearRect(40, 45, 90, 75);

    // 境界線の色を設定
    ctx.strokeStyle = "#C6A35B";
    // 線の幅を設定
    ctx.lineWidth = 5;

    // 四角形の境界線を描画する
    ctx.strokeRect(60, 57.5, 50, 50);
</script>

こちらが実際に描画したcanvasです。

線（パス）を描画

四角形の他には、パスを組み合わせて描画することで図形を表現することができます。
パスを用いた図形の描画では、次の関数を使用します。

関数

beginPath()・・・新規パスを作成。以降の描画呼び出しはパスを構築します。
closePath()・・・開始パスに直線を描画し、パスを閉じる
stroke()・・・境界線を描画
fill()・・・塗りつぶして描画
moveTo(x, y)・・・指定座標に移動
lineTo(x, y)・・・現在地から指定座標まで線を描画

実装

実際に描画してみましょう。
詳細はコメントにそれぞれ記載していますので、実装しながらだと理解しやすいかもしれません。

<canvas id="canvas" width="200" height="200">代替コンテンツ</canvas>
<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    // 塗りつぶし
    ctx.beginPath();    // パス開始
    ctx.moveTo(50,30);  // x=50, y=30に移動
    ctx.lineTo(80,80);  // x=50→80, y=30→80へパスを設定
    ctx.lineTo(20,80);  // x=80→20, y=80→80へパスを設定
    ctx.closePath();    // パス終了
    ctx.fillStyle = "#A2D7DD";  // 塗りつぶしの色を設定
    ctx.fill();  // 塗りつぶしで描画

    // 輪郭線
    ctx.beginPath();    // パス開始
    ctx.moveTo(10,120); // x=10, y=120に移動
    ctx.lineTo(80,20);  // x=10→80, y=120→20へパスを設定
    ctx.lineTo(180,70); // x=80→180, y=20→70へパスを設定
    ctx.closePath();    // パス終了
    ctx.strokeStyle = "#65C294";    // 輪郭線の色を設定
    ctx.stroke();       // 輪郭線で描画

    // 円（三日月）
    ctx.beginPath();    // パス開始
    ctx.arc(250, 60, 40, 0, Math.PI * 2);
    ctx.closePath();    // パス終了
    ctx.fillStyle = "#FFF3D4";  // 塗りつぶしの色を設定
    ctx.fill();  // 塗りつぶしで描画

    ctx.beginPath();    // パス開始
    ctx.arc(270, 60, 25, 0, Math.PI * 2);
    ctx.closePath();    // パス終了
    ctx.fillStyle = "#FFF";  // 塗りつぶしの色を設定
    ctx.fill();  // 塗りつぶしで描画

</script>

こちらが実際に描画したcanvasです。

このようにして、パス使って図形を描画することができました。

注意点ですが、beginPath()の呼び出し直後は、どの関数が呼び出されてもmoveTo()として扱われ実行されます。
例えると紙に書く時、鉛筆を紙に添えている動作をイメージしたものです。
そのため、基本的には、beginPath()の後や、canvasを新規で作成した後はmoveTo()を意識的に呼び出すようにしてください。

円（円弧）の描画

続いて、円（円弧）の描画についてです。
まずは関数の説明です。

関数

arc(x, y, radius, startAngle, endAngle[, anticlocwise])・・・円弧を描画
x,y=中心地、radius=半径、startAngle=開始角度、endAngle=終了角度、anticlocwise=周る方向（初期設定：時計回り）

実装

続いて、ソースコードの内容です。
詳細はコメントに記載しています。

<canvas id="canvas" width="200" height="200">代替コンテンツ</canvas>
<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    // 円（三日月）大きい円
    ctx.beginPath();    // パス開始
    // (50, 60)を中心に半径40で0～360度分、円を描画
    ctx.arc(50, 60, 40, 0, Math.PI * 2);
    ctx.closePath();    // パス終了
    ctx.fillStyle = "#FFF3D4";  // 塗りつぶしの色を設定（薄い黄色）
    ctx.fill();  // 塗りつぶしで描画

    // 円 小さい円で月の中を表現
    ctx.beginPath();    // パス開始
    // (70, 60)を中心に半径25で0～360度分、円を描画
    ctx.arc(70, 60, 25, 0, Math.PI * 2);
    ctx.closePath();    // パス終了
    ctx.fillStyle = "#FFF";  // 塗りつぶしの色を設定（白）
    ctx.fill();  // 塗りつぶしで描画

</script>

こちらが実際に描画したcanvasです。