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');
var img = new Image();
img.onload = function onImageLoad() {
context.drawImage(img, 128, 40);
}
img.src = 'resource/img01.png'; //相対URLの場合
//img.src = 'http://www.ipentec.com/images/img01.png'; //絶対URLの場合
}
</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>
画像は下図の画像を利用します。
resource/img01.png
解説
キャンバスのコンテキストの取得についてはキャンバスに描画する際の共通処理です。詳しくは
こちらの記事を参照して下さい。
var img = new Image();
キャンバスに描画する画像を準備します。Imageオブジェクトを作成します。
img.onload = function onImageLoad() {
context.drawImage(img, 128, 40);
}
img.src = 'resource/img01.png';
キャンバスへの画像の描画は、CanvasのコンテキストのdrawImage()メソッドを利用します。第一引数にImageオブジェクト、第二第三引数に画像を描画するX,Y座標を与えます。
Imageオブジェクトの画像の読み込みは非同期で処理されるため、画像の描画はImageオブジェクトの画像の準備ができた状態で実行する必要があります。そのため、Imageオブジェクトのonloadイベントに描画処理を実装します。
ソース画像の設定は最後に処理します。
実行結果
HTMLファイルをWebブラウザで開きます。下図の結果となります。画像がキャンバスに描画できました。
注意
下記のコードの場合、drawImageが実行されるタイミングでImageオブジェクトの画像の読み込みが完了している保証がありません。
そのため、画像が表示される場合と、されない場合が発生します。画像の描画はImageオブジェクトのonloadに実装したほうが良いです。
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if (!canvas || !canvas.getContext) {
return false;
}
var context = canvas.getContext('2d');
var img = new Image();
img.src = 'resource/img01.png'; //相対URLの場合
//img.src = 'http://www.ipentec.com/images/img01.png'; //絶対URLの場合
context.drawImage(img, 128, 40);
}
</script>
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
