canvas要素

2023.04.07

canvasタグが設置された箇所にJavaScriptによって2Dもしくは3Dの図形を描画することができる。
図形を表示できる幅と高さは、初期値で幅300px、高さ150pxとなっており、canvas要素にwidthとheight属性を指定することで描画範囲の拡張が可能となる。
CSSによってcanvas要素のwidthとheightを指定しても、描画範囲が拡張されるわけではなく、canvas要素が拡大されるのみなので注意すること。

<canvas id="canvas001" width="200" height="200">
  canvas要素をサポートしていません。
</canvas>

描画範囲は幅200px、高さ200pxに設定。
canvasタグをサポートしていない古いブラウザやJavaScriptが無効のブラウザのために、タグ内には必ず代替コンテンツを記述しておく。また、要素を指定しやすいようにid属性を付ける。

window.onload = function() {
  const canvas001 = document.getElementById("canvas001");
  if (canvas001.getContext) {
    const context001 = canvas001.getContext("2d"); //2次元描画
  }
};

getElementById()メソッドで特定のcanvas要素を指定し、getContext()メソッドを使用して描画コンテキストを取得する。今回は2次元の図形を描画するので、”2d” を指定。
またcanvas要素に対応していないブラウザには代替コンテンツが表示され、getContext()メソッドを有するブラウザのみif文内の記述を処理する。
そしてonloadイベントでべージの読み込み後に実行させるようにする。

window.onload = function () {
  const canvas001 = document.getElementById("canvas001");
  if (canvas001.getContext) {
    const context001 = canvas001.getContext("2d"); //2次元描画
    //円弧を描く
    context001.beginPath(); //パスの作成
    context001.arc(100, 100, 90, 0, Math.PI * 2, true); //正円のパス
    context001.stroke();

    context001.beginPath(); //パスの作成
    context001.arc(100, 100, 80, Math.PI * 0.5, Math.PI * 1.5, false); //半円のパス
    context001.closePath(); //パスを閉じる
    context001.fill(); //塗りつぶしの描画
  }
};

上記の例は、輪郭線の円とベタ塗りの半円を描いたものである。

  • まず、輪郭線の円について、 beginPath() でパスを作成する。
  • 次に(100, 100)の点を中心に半径90pxの円形パスを作成する。開始角度を0度、終了角度を360度とすれば正円のパスになる。角度について、Math.PIで円周率を取得できる。JavaScriptで角度を取り扱う時は、単位をラジアンとするのでMath.PIで180度を意味する。
  • 続いてはベタ塗りの半円について、中心点は同じ、半径は80px。開始角度を90度、終了角度を270度としで、反時計回りにパスを作成する。
  • 最後にパスを閉じて塗りつぶしで描画すれば半円の図形が描画される。
inserted by FC2 system