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

Question

我有一个游戏的静态内容，我决定使用css3 div技术将我的内容图像居中并将画布放在里面，就像这样（.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标签下，大小合适但我不能在画布上放置任何精灵。

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

Answer 1

您不能指望{/ 1}元素 canvas元素;通常的方法是使用[n empty] div并将其id传递给Phaser.Game构造函数。你最好在div中添加一个id，并在创建游戏时手动删除图像。