我可以使用 Phaser 将 canvas 放在 img 标签内吗

Question

我有一个游戏的静态内容，我决定使用 css3 div 技术将我的内容图像居中并将 canvas 放在里面，就像这样 (.css文件):

/* ###### GAME ##### */
.game-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.game-content {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

和html部分：

<div class="game-container">
    <img id="gameCanvas" class="game-content" src="content-v2.png">
</div>

然后我使用带有 id="gameCanvas" 的 img 标签创建 Phaser 游戏实例。 canvas 元素出现在 img 标签下，尺寸合适，但我无法在 canvas.

上放置任何精灵

我的情况有没有更好的解决方案，或者为什么它不能这样工作？

Answer 1

您不能期望 canvas 元素位于和 img 元素之间；通常的方法是有一个 [n empty] div 并将其 id 传递给 Phaser.Game 构造函数。您最好在div中添加一个id，并在创建游戏时手动删除图像。

我可以使用 Phaser 将 canvas 放在 img 标签内吗

Can I place canvas inside img tag using Phaser

html

css

canvas

phaser-framework