gpt4 book ai didi

javascript - 背景图像 javascript HTML5 Canvas

转载 作者:行者123 更新时间:2023-12-02 14:05:57 25 4
gpt4 key购买 nike

我正在尝试使用 JavaScript 创建一个在简单网页上运行的简单游戏。由于某种原因,我无法让它加载背景图像。我反复搜索并尝试了多种方法,但最终得到了一张黑白 Canvas 。请帮助我,因为我束手无策。

这是我的代码片段:

<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 使用这些方法。

您可以使用 CSS 并在样式 block 中定义或在 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 的工作示例

关于javascript - 背景图像 javascript HTML5 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40030288/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com