Javascript SpriteSheet不起作用

Javascript SpriteSheet not working

本文关键字：不起作用 SpriteSheet Javascript      更新时间：2023-09-26

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

<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>
将

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

您可能正在调用 onload，因此在 img 元素完全加载之前调用 draw_hello（）。

相关文章：