Question

我正在尝试使用javascript创建一个简单的游戏，以便在简单的网页上运行。出于某种原因，我无法加载背景图像。我反复搜索并尝试了很多方法，但我最终得到了一个黑白色的画布。请帮助我，因为我在我的智慧结束。

这是我的代码段：

<body>


<!-- Site navigation menu -->
<ul>
<li><a href="index.html">Play Game</a></li>
<li><a href="about.html">About</a></li>
<li><a href="help.html">Help</a></li>
</ul>


<!-- Creating the canvas -->
<canvas id= "gameCanvas" width="600" height="480"></canvas>

<script>
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
var bkGround = new Image();
bgImage.src = '/images/backGround.jpg';
bkGround.onload = function(){
ctx.drawImage(bkGround,69,50);   
}
</script>

期待的感谢。

Answer 1

我相信你可能会在完成加载之前尝试使用背景图像，但你也可以在CSS中使用这些方法。

您可以使用CSS并在样式块中定义或在JS中动态设置它。

<style>

#gameCanvas{
    background-image:    url(/images/backGround.jpg);
    background-size:     cover;                      
    background-repeat:   no-repeat;
    background-position: center center;
}
</style>

或者更喜欢JS：

document.getElementById("gameCanvas").style.background = "url('/images/backGround.jpg')";

注意 - 确保图像可以访问浏览器。如果使用JS，还要检查控制台是否有错误 - JS在到达您的代码之前可能会遇到错误。另外，请参阅HTML5 Canvas background image

Answer 2

尝试在onload事件中加载它。并根据建议检查控制台查看是否有任何错误。

什么是bgImage？ bgImage.src = '/images/backGround.jpg';？

body.onload = RenderImage;
function RenderImage()
{
//Your existing script
}

Answer 3

尝试将bgImage更改为bkGround。并在设置src回调后移动设置onload属性。

所以你的代码将是：

<canvas id= "gameCanvas" width="600" height="480"></canvas>
<script>
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
var bkGround = new Image();
bkGround.onload = function(){
ctx.drawImage(bkGround,69,50);   
};
bkGround.src = '/images/backGround.jpg';
</script>

背景图片javascript HTML5画布

3 个答案: