0

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要素を画像ソースとして使用する場合、そのオンロードは必要ですか? ありがとう。

4

1 に答える 1