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（）。

Javascript SpriteSheet无法正常工作

1 个答案: