画像描画の罠です。
var img = new Image();
img.src = "cog.png";
context.drawImage(img, 60, 35);
これでは描画されません。描画するときにまだ画像ファイルが読み込まれていないからです。JavaScript特有のことです。
画像を読み込んでから描画
var img = new Image();
img.src = "cog.png";
img.onload = function(){
context.drawImage(img, 60, 35);
}
onloadを使って画像が読み込まれてから描画します。 全ソースです。
画像読み込んでから描画
解説はこちら。
|