2

Web開発ラボで作業していますが、画像が表示されません。画像を参照する際に間違っていることがありますか？画像自体へのリンクは次のとおりです：http：//tuftsdev.github.com/WebProgramming/assignments/pacman10-hp-sprite.png

注：画像をローカルディレクトリにコピーしたので、参照が正しいことがわかります。

 <!DOCTYPE html>
 <html>
 <head>
     <title>Ms. Pacman</title>
     <script>
         function draw() {
             canvas = document.getElementById('simple');

             // Check if canvas is supported on browser
             if (canvas.getContext) {
                ctx = canvas.getContext('2d');
                var img = new Image();
                img.src = '"pacman10-hp-sprite.png';
                ctx.drawImage(img, 10, 10);
             }
             else {
                alert('Sorry, canvas is not supported on your browser!');
             }
       }
     </script>
  </head>

 <body onload="draw();">
     <canvas id="simple" width="800" height="800"></canvas>
 </body>
 </html>
4

1 に答える 1

2

画像が実際にロードされたら、コールバックを設定してキャンバスに画像を描画する必要があります。

function draw() {
    canvas = document.getElementById('simple');

    // Check if canvas is supported on browser
    if (canvas.getContext) {
        ctx = canvas.getContext('2d');
        var img = new Image();

        // If you don't set this callback before you assign
        // the img.src, the call ctx.drawImage will have 
        // a null img element. That's why it was failing before
        img.onload = function(){
            ctx.drawImage(this, 10, 10);
        };

        img.src = "pacman10-hp-sprite.png";
    } else {
        alert('Sorry, canvas is not supported on your browser!');
    }
}
于 2013-02-14T16:25:48.103 に答える