HTML Canvas を利用して図形を描画する

HTML Canvas を利用して図形を描画するコードを紹介します。

プログラム (シンプルな例)

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />

    <script type="text/javascript">
       function draw() {
          var canvas = document.getElementById('SimpleCanvas');

          if ( ! canvas || ! canvas.getContext ) {
            return false;
          }

          var context = canvas.getContext('2d');
          context.beginPath();
          context.moveTo(80, 80);
          context.lineTo(120, 80);
          context.lineTo(120, 120);
          context.lineTo(80, 120);
          context.closePath();
          context.stroke();
        }
    </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
    <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
    <div>Canvas Demo</div>
</body>
</html>

解説

<canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>

上記コードがCanvas部になります。

function draw() {
  var canvas = document.getElementById('SimpleCanvas');

  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }

  var context = canvas.getContext('2d');
  context.beginPath();
  context.moveTo(80, 80);
  context.lineTo(120, 80);
  context.lineTo(120, 120);
  context.lineTo(80, 120);
  context.closePath();
  context.stroke();
}

上記のJavaScriptコード部がCanvasに描画をするコードとなります。
getElementById()メソッドを呼び出し、Canvasオブジェクトを取得します。描画のためのコンテキストはCanvasオブジェクトのgetContext()メソッドを呼び出すことで取得できます。getContextメソッドの引数には"2D"を与えます。(現在は"2D"のみがサポートされています。)
コンテキストがnullでなければ、描画処理をします。描画はContextオブジェクトのメソッドを利用します。上記の場合はMoveTo()メソッドでペンを移動し、LineTo()メソッドで線を描画しています。描画後closePath()メソッドを呼び出しパスを閉じ、stroke()メソッドで描画を実行します。

実行結果

HTMLファイルをWebブラウザで表示します。下図の結果が得られます。

プログラム (複雑な例)

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />

    <script type="text/javascript">
       function draw() {
          var canvas = document.getElementById('SimpleCanvas');

          if ( ! canvas || ! canvas.getContext ) {
            return false;
          }

          var context = canvas.getContext('2d');
          context.beginPath();
          context.moveTo(80, 80);
          context.lineTo(120, 80);
          context.lineTo(120, 120);
          context.lineTo(80, 120);
          context.closePath();
          context.stroke();

          var cx = 360;
          var cy = 200;
          var radius = 36;

          context.beginPath();
          context.arc(cx, cy, radius, 0, 2 * Math.PI, false);
          context.fillStyle = '#9fd9ef';
          context.fill();
          context.lineWidth = 1;
          context.strokeStyle = '#00477d';
          context.stroke();

          var img = new Image();
          img.onload = function onImageLoad() {
            context.drawImage(img, 140, 200);
          }
          img.src = 'resource/img02.png'; //相対URLの場合

        }
    </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
    <canvas id="SimpleCanvas" width="640" height="360" style="background-color:#FFFFFF;"></canvas>
    <div>Canvas Demo</div>
</body>
</html>

解説

以下のコードでキャンバスに線を描画して四角形を描画します。コードの詳細はこちらの記事を参照してください。

  var context = canvas.getContext('2d');
  context.beginPath();
  context.moveTo(80, 80);
  context.lineTo(120, 80);
  context.lineTo(120, 120);
  context.lineTo(80, 120);
  context.closePath();
  context.stroke();

以下のコードで円を描画します。コードの詳細はこちらの記事を参照してください。

  var cx = 360;
  var cy = 200;
  var radius = 36;

  context.beginPath();
  context.arc(cx, cy, radius, 0, 2 * Math.PI, false);
  context.fillStyle = '#9fd9ef';
  context.fill();
  context.lineWidth = 1;
  context.strokeStyle = '#00477d';
  context.stroke();

以下のコードで画像をキャンバスに描画します。コードの詳細はこちらの記事を参照してください。

  var img = new Image();
  img.onload = function onImageLoad() {
    context.drawImage(img, 140, 200);
  }
  img.src = 'resource/img02.png'; //相対URLの場合