背景图像 javascript HTML5 画布答案

【问题标题】：Background image javascript HTML5 canvas背景图像 javascript HTML5 画布
【发布时间】：2017-02-23 03:01:17
【问题描述】：

我正在尝试使用 javascript 创建一个在简单网页上运行的简单游戏。出于某种原因，我无法让它加载背景图像。我反复搜索并尝试了多种方法，但最终得到了一张黑白画布。请帮帮我，因为我已经不知所措了。

这是我的代码 sn-p：

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

期待的感谢。

【问题讨论】：

你的项目文件夹结构是什么样的？
你检查你的控制台了吗？
你的控制台有什么错误？另外，考虑只使用 CSS 设置画布的背景。您将获得更好的性能，因为您不必每帧都重新绘制背景。

标签： javascript html html5-canvas

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：