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のメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-01-06
作成日: 2016-08-01
