我可以使用 Phaser 将画布放在 img 标签内吗答案

【问题标题】：Can I place canvas inside img tag using Phaser我可以使用 Phaser 将画布放在 img 标签内吗
【发布时间】：2015-12-22 05:10:37
【问题描述】：

我有一个游戏的静态内容，我决定使用 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 游戏实例。画布元素出现在 img 标签下，大小合适，但我无法在画布上放置任何精灵。

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

【问题讨论】：

标签： html css canvas phaser-framework

【解决方案1】：

你不能指望有一个canvas元素在一个img元素；通常的方法是有一个 [n empty] div 并将其 id 传递给 Phaser.Game 构造函数。最好在创建游戏的时候给 div 添加一个 id 并手动移除图片。

【讨论】：