Javascript 如何在Phaser游戏中添加Div

我有一个

game.js

，其中所有来自Phaser游戏的精灵都被渲染。我还有一个

index.html

，它调用这个脚本来渲染游戏。我想在game.js画布上为健康栏添加一个

，但我无法做到，当我尝试时，它只显示在游戏上方或下方

Index.html：

<div id="game">

    <script src="/js/game.js"></script>
    <script src="/js/script2.js"></script>
    <script src="/js/script3.js"></script>
    <script src="/js/script4.js"></script>= 

    <div id="health-bar">the code of my health bar</div>    
</div>

---

这是因为

Phaser.Game

正在将一个新的

canvas

子元素添加到您的

中，如果您查看页面，就会看到这个元素

是块级元素，与

类似，因此同级元素将依次显示

如果希望

div#health bar

显示在画布元素上方，则需要相应地对其进行定位。有多种方法可以做到这一点，但其中一种方法可能是在页面中添加以下CSS，根据需要更改

顶部

和

左侧

值：

div#health-bar {
  position: absolute;
  z-index: 100;
  color: white;
  top: 50px;
  left: 100px;
}

如果你搜索CSS定位，你会发现这个主题上有大量的资源，包括

document.querySelector("#game canvas")

---

谢谢，成功了！有没有办法获取Phaser生成的画布的id？所以我可以使用这个命令？var ctx=document.getElementById（'canvas'）.getContext（'2d'）；可能有更好的方法来获取您想要的内容，但我可能会推荐类似于

document.getElementById（“游戏”）.getElementsByTagName（“画布”）[0]

的方法，因为Phaser本身似乎不允许您在创建的画布上设置id。

document.querySelector("#game canvas")