HTML Canvas オブジェクトを作成する - メモリ上でのHTML Canvasの作成

このページのタグ:[JavaScript] [HTML] [HTML Canvas]
HTML Canvas オブジェクトを作成するコードを紹介します。

概要

通常のHTML Canvasの利用ではページのHTMLファイル内に canvasタグを記述することでHTML Canvasを利用できますが、画面に表示されない、メモリ上でのHTML Canvasが利用したいことがあります。この記事では、画面には表示されない、メモリ上でのHTML Canvasを作成するコードを紹介します。
なお、作成したHTML CanvasオブジェクトをappendChild()メソッドなどで、画面に表示されている要素に追加すれば、作成したHTML Canvasオブジェクトを画面に表示することもできます。

プログラム

コード

下記のHTMLファイルを作成します。

<!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">
    var mem_canvas;

    function createCanvas() {
      mem_canvas = document.createElement("canvas");
      mem_canvas.width = 64;
      mem_canvas.height = 64;
      var context = mem_canvas.getContext('2d');
      context.fillStyle = "rgb(0,0,192)";
      context.fillRect(0, 0, 64, 64);
    }

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

解説

bodyタグのonloadイベントにより、ページ読み込み時にcreateCanvas()関数が実行されます。

createCanvas関数内では、createElement("canvas")によって、HTML Canvasオブジェクトを作成します。
HTML Canvasの幅と高さはキャンバスオブジェクトのwidth、heightプロパティに値を設定します。
今回は初期化処理として、RGB(0,0,192)のカラーでキャンバス全体を塗りつぶしています。


    function createCanvas() {
      mem_canvas = document.createElement("canvas");
      mem_canvas.width = 64;
      mem_canvas.height = 64;
      var context = mem_canvas.getContext('2d');
      context.fillStyle = "rgb(0,0,192)";
      context.fillRect(0, 0, 64, 64);
    }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。メモリ上でHTML Canvasが作成されただけであるため、画面には何も表示されません。

動作確認

実際にHTML Canvasが作成されているか確認します。先のHTMLファイルに

  <a href="#" onclick="document.body.appendChild(mem_canvas);">確認</a>
のリンクを追加します。

コード

HTMLファイル全体のコードは下記になります。

<!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">
    var mem_canvas;

    function createCanvas() {
      mem_canvas = document.createElement("canvas");
      mem_canvas.width = 64;
      mem_canvas.height = 64;
      var context = mem_canvas.getContext('2d');
      context.fillStyle = "rgb(0,0,192)";
      context.fillRect(0, 0, 64, 64);
    }

  </script>
</head>
<body onload="createCanvas();" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="360" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
  <a href="#" onclick="document.body.appendChild(mem_canvas);">確認</a>
</body>
</html>

解説


  <a href="#" onclick="document.body.appendChild(mem_canvas);">確認</a>
により、[確認]リンクをクリックした際に、作成したmem_canvasオブエジェクトをbodyタグの最後に追加します。この処理により作成したHTML Canvasオブジェクトが画面に表示されます。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


[確認]リンクをクリックすると下図の表示に切り替わります。作成したHTML Canvasオブジェクトが画面に表示されることが確認できます。Canvasのサイズや塗りつぶしのカラーもコードで指定したものと一致しています。


プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)