JavaScript: Canvas を配置し、描画コンテキストを取得する

HTML5 の Canvas API を使用することで、動的に図形を描画できます。

Canvas API を使うことによって、 これまではFlash等のプラグインを使って実現していた図形描画機能を、 ブラウザ標準のAPIとして実現することが出来ます。

まずは準備編として、canvas 要素を配置し、描画コンテキストを取得します。

canvas 要素を配置

Canvas API を使用するには、まずcanvas 要素を配置する必要があります。

下の例では、canvas 要素がどこにあるのかわかるように枠線（border）を設定しています。


<canvas id="mycanvas" width="400" height="200"></canvas>

<style>
canvas {
    border: 1px solid silver;
}
</style>

canvas 要素の width 属性、height 属性で図形のサイズを設定しています（単位は px ）。

何も設定しない場合はデフォルト値として「width="300" height="150"」となります。

スタイルシートの width プロパティや、height プロパティで指定した場合は、 実装によっては拡大・縮小されてしまいます。 canvas のサイズはHTML属性か DOM で設定するようにしてください。

canvas 要素オブジェクトを取得

canvas 要素を配置した次は、canvas 要素オブジェクトを取得します。 canvas 要素で指定した id="mycanvas" を使用して、次のように記述します。 
var canvas = document.getElementByID('mycanvas');

描画コンテキストを取得

次に 「描画コンテキスト」と呼ばれるオブジェクトを取得します。 先程取得した canvas 要素オブジェクトの getContext() メソッドを使って次のように記述します。

var context = canvas.getContext('2d');

引数の'2d' は2次元の意味です。

この「描画コンテキスト」に対してプロパティを設定したり、メソッドを実行したりして、 図形を描画します。

座標について

座標は下図のように、左上が(0, 0)で、右に向かって x が増加し、 下に向かって y が増加します。

座標

例えば、左上から x 方向に 100、y 方向に 200 の座標は (100, 200)になります。

まとめ

Canvas API を使用するための準備をまとめると次のようになります。

  • canvas 要素を配置する（サイズ指定）
  • canvas 要素オブジェクトを取得
  • 描画コンテキストを取得
  • 座標は左上を(0, 0)とし、右方向に x、下方向に y の座標は(x, y)

<canvas width="400" height="200"></canvas>

<script>
    
    var canvas = document.getElementByID('mycanvas');
    var context = canvas.getContext('2d');  // 描画コンテキスト
    
</script>
JavaScript入門