Question

出于某种原因，我似乎无法让我的英雄形象出现在屏幕上。非常感谢任何有关它没有出现的帮助。谢谢！

<html>
<style>
#myheroimg{

}
</style>
<body>

<canvas width="500" height="500" id="canvas"></canvas>
<script>
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

var heroImage= new Image();
heroImage.onload=function(){

}
heroImage.src="hero.jpg";

var hero={
x:5,
y:5
};

document.body.style.backgroundImage="url('background.jpg')";

function main(){
ctx.drawImage(heroImage, 10, 10);
}
main();
</script>
</body>
</html>

Answer 1

您可能希望将调用移至main()内的heroImage.onload函数，并在将其添加到document.body后获取2d上下文。

为什么你要添加一个新的画布，如果你已经有了？为什么要在javascript中更改正文背景图片？ ......等等。

无论如何，试试这个：

<html>
<style>
<body>
<script>
     var canvas = document.createElement("canvas");
     document.body.appendChild(canvas);
     canvas.width = 512;
     canvas.height = 480;
     var ctx = canvas.getContext("2d");

    function main(){
        ctx.drawImage(heroImage, 10, 10);
    }

    var heroImage= new Image();
    heroImage.onload=function(){
        main();
    }
    heroImage.src="hero.jpg";

    var hero={
        x:5,
        y:5
    };

    document.body.style.backgroundImage="url('background.jpg')";

</script>
</body>
</html>

图像没有出现在javascript画布中

1 个答案: