javascriptでcanvas上に画像を描画するときの初心者メモ
最近ふと思い立ってjavascriptを特に勉強せず,適当に書いています.
そのうち,ちゃんとした入門書を読もうと考えています.
今のところcanvasで図形描くことしかやってません.
ブラウザは普段ChromeとFirefoxを使っているのですが,画像をcanvas上に描画するところで,ちょっと動作が違った(というより書き方が悪かった)ので,後で自分が勉強し直すとき用のメモを残します.
onload = function() { draw(); }; function draw() { var canvas = document.getElementById('hoge'); if( !canvas || !canvas.getContext ) return false; var ctx = canvas.getContext('2d'); var img = new Image(); img.src = "img.png"; ctx.drawImage(img, 0, 0); }
最初Firefoxで動作を確認しながら見ていたので,これでも画像がcanvas上に描画されてました.
ところが,Chromeだと何も表示されず,ただ真っ白(画像が表示されない状態)になってました.
調べたら,drawImage()する際に,画像がloadし終わる前だとダメみたいです.
次のように書くと,loadが終わったらdrawImage()するように出来るらしいです.
onload = function() { draw(); }; function draw() { var canvas = document.getElementById('hoge'); if( !canvas || !canvas.getContext ) return false; var ctx = canvas.getContext('2d'); var img = new Image(); img.src = "img.png"; img.onload = function() { ctx.drawImage(img, 0, 0); } }
IEだとこれでもダメっぽくて,他にもいろいろ足すようです.(http://www.html5.jp/canvas/how6.html)
下のような感じになるみたいですが,Chromeとかだとうまく動作しなかったので,また暇な時に調べ直したい.
onload = function() { draw(); }; function draw() { var canvas = document.getElementById('hoge'); if( !canvas || !canvas.getContext ) return false; var ctx = canvas.getContext('2d'); var img = new Image(); img.src = "img.png?" + new Date().getTime(); img.onload = function() { ctx.drawImage(img, 0, 0); } }