canvas js プログラムを書いたのですが、ubuntu 13.04 chromium で DOM 要素を使うと動きません (firefox 23.0 では問題ありません)。コードは次のとおりです。
<body>
<canvas id="map" width="600" height="600"></canvas>
<img id="photo" src="jiuwo.jpg" style="display:none;">
<img id="frame" src="frame.png" style="display:none;">
</body>
<script type="text/javascript">
function drawGallary(){
var canvas = document.getElementById('map');
if(canvas.getContext){
var ctx = canvas.getContext('2d');
var img1 = document.getElementById('photo');
var img2 = document.getElementById('frame');
ctx.drawImage(img1, 300, 300, 100, 100, 20, 21, 100, 100); // block of image
ctx.drawImage(img2, 0, 0);
}
}
</script>
drawImage を onload 関数に入れると、うまく機能することがわかりました。
function drawGallary2(){
var canvas = document.getElementById('map');
if(canvas.getContext){
var ctx = canvas.getContext('2d');
var img1 = new Image();
img1.src = "jiuwo.jpg";
img1.onload = function(){
ctx.drawImage(img1, 300, 300, 100, 100, 20, 21, 100, 100);
}
var img2 = document.getElementById('frame');
img2.onload = function(){
ctx.drawImage(img2, 0, 0);
}
}
}
DOM要素を画像ソースとして使用する場合、そのオンロードは必要ですか? ありがとう。