JavaScript 画像データが読み込まれた場合に処理する
Imageオブジェクトでは、画像が読み込まれると、「load」イベントが発生します。Imageオブジェクトには「onload」プロパティがあり、イベントハンドラを設定しておくことで、画像読み込み完了時に処理することができます。Canvasに画像を描画する場合は、画像データが読み込まれている必要があります。
<body>
<script>
window.addEventListener("load" , function(){
//canvas要素を読みだす
var canvasObj = document.getElementsByTagName("canvas")[0];
//コンテキストを読みだす
var context = canvasObj.getContext("2d");
//画像を読み込む
var myImage = new Image();
myImage.src = "images/629959_s.jpg";
//画像の読み込み完了時に呼び出すイベントハンドラを設定
myImage.onload = function(){
context.drawImage(this, 20,10);
}
}, false);
</script>
<canvas width="320" height="240">
Canvas対応ブラウザを利用してください。
</canvas>
</body>画像データが読み込まれた後、Canvasに画像が描画される
