HTML5：如何将固定的文本输入放置在居中的画布上？答案

【问题标题】：HTML5: How do you place a fixed Text Input over a centering canvas?HTML5：如何将固定的文本输入放置在居中的画布上？
【发布时间】：2016-06-30 03:28:08
【问题描述】：

我有一个包含游戏的画布。我想在游戏中的特定位置放置一个 html 文本输入字段。事实证明这很困难，因为我希望画布在窗口中自动水平居中，并且当窗口大小发生变化时它会与文本输入不同步。

我应该为这两个元素提供什么样式设置以使文本字段保持在画布上的同一位置？

【问题讨论】：

您能否提供一个 jsfiddle 以及我们可以使用的某种示例？
将画布和输入类型文本包装在一个 div 中。包装器是position:relative，画布和输入是position:absolute。
如果他们的位置是绝对的，我不确定如何让画布或输入居中。
我还没有任何代码。任何能使画布以文本输入为中心的方法都保留在画布上的同一位置。但这是我的工作尝试：jsfiddle.net/3n6k7jz7 如果我将文本字段设置为 absolute，那么它不会居中，但是如果我删除 position: absolute 那么它不会出现在画布上并在它下方。

标签： javascript html canvas centering textinput

【解决方案1】：

我找到了一个可行的解决方案：http://jsfiddle.net/FV2NL/

<div id="container">
    <canvas id="canvas" width=800 height=600></canvas>
        <div id="menu">
            <button id="button1" type="button">Start</button>
            <button id="button2" type="button">Options</button>
            <button id="button3" type="button">High Scores</button>
        </div>
</div>
</body>

所有内容都必须位于具有相对定位且以 margin: 0 auto; 为中心的 div 组内。画布应具有绝对定位和 top: 0;左：0；。文本输入是绝对的，并放在相对 div 内。

这是来自另一个 StackOverflow 页面：

Buttons centered over canvas

【讨论】：

【解决方案2】：

给你的画布元素位置：相对并给你的消息元素位置：绝对。然后使用 top & left 来定位消息。

canvas {
  border: 1px solid black;
  height: 300px;
  width: 300px;
  position:relative;
}


#message {
  position:absolute;
  top:150px;
  left:100px;
}

https://jsfiddle.net/ebkpcsvg/1/

【讨论】：

画布不在此解决方案的中心。如何使画布在页面中水平居中但保留消息？
您可以通过添加一个包含 div 然后使用 css 属性将画布水平居中：margin: 0 auto。在这里，我更改了 fiddle 以使消息绝对定位到包含 div jsfiddle.net/ebkpcsvg/2
这几乎可以工作，但是当水平滚动条出现时，文本输入再次滑出目标。
嗯，不幸的是还有其他问题。我不希望文本输入正好在左边：50% 和顶部：50%。但是，如果我更改这些值以将其放在我想要的位置，它就不再与画布同步了。
@Eagleheart 包含画布的 div 内是否还有其他内容？你介意制作一个 jsfiddle 吗？