背景图片JavaScript HTML5画布

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背景图片作为工作示例

Answer 2

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

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

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

Answer 3

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

因此，您的代码将是：

<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 个解决方案

解决方案1
1 已采纳 2017-01-23 03:22:07

解决方案2
0 2016-10-13 21:30:10

解决方案3
0 2016-10-13 21:36:15

背景图片JavaScript HTML5画布

问题描述

3 个解决方案

解决方案1 1 已采纳 2017-01-23 03:22:07

解决方案2 0 2016-10-13 21:30:10

解决方案3 0 2016-10-13 21:36:15

解决方案1
1 已采纳 2017-01-23 03:22:07

解决方案2
0 2016-10-13 21:30:10

解决方案3
0 2016-10-13 21:36:15