Javascript SpriteSheet 不起作用

Question

在简单的画布上显示精灵表时遇到了一些问题。出于调试目的，我从我的主代码中取出了代码，这样我就可以只处理一个小文件。精灵表加载到画布旁边，但画布不显示精灵本身。 任何帮助深表感谢。谢谢

<canvas id="canvas" width="800" height="36" style="border:1px solid" onload="draw_hello()" ></canvas>

<img id="helloSprites" src="Tux-Hello.png">

<script>
//hello sprite
var x=0;
var y=0;
var f=0;
var w=32;
var h=32;
var mycanv=document.getElementById("canvas");
var ctx=mycanv.getContext("2d");

//helloImage.src = "images/Tux-Hello.png";
//var helloImage = new Image();


var hello=document.getElementById("helloSprites");
function draw_hello() {
    setInterval(drawHello,200);
}
function drawHello() {
        ctx.fillStyle="#292";
        ctx.fillRect(0,0,mycanv.width, mycanv.height);
        ctx.fillStyle="#aaa";
        ctx.fillRect(0,25,mycanv.width, mycanv.height);
    if (x>=(mycanv.width)) {  
        x=0;
    }
    x+=2;
        f++;
    // draw the car 
        if (f==2) {
          f=4;
        }
        if (f==6) {
          f=0;
        }

    ctx.drawImage(hello, w, f*h, w, h, x, y, w, h);
}

</script>

Answer 1

将onload 附加到body 元素而不是canvas 元素。

您可能正在调用 onload——因此在 img 元素完全加载之前调用 draw_hello()。