图像没有出现在javascript画布

问题描述：

出于某种原因，我似乎无法让我的heroImage出现在屏幕上。任何帮助，为什么它不出现是非常感谢。谢谢！图像没有出现在javascript画布

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

我知道你有一个公认的答案，但我只是问你打算用你的heroImage呢？到处走？或者你只是想绘制一个静态图像。 – Canvas

我打算使用键盘控件来移动图像，并在画布的其他位置产生其他对象 –

答

您可能希望将呼叫转移到功能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画布

相关推荐