HTML5:如何将固定文本输入放置在居中画布上

HTML5: How do you place a fixed Text Input over a centering canvas?

本文关键字：输入 文本 HTML5      更新时间：2023-09-26

我有一个包含游戏的画布。我想在游戏的特定位置放置一个html文本输入字段。这被证明是困难的，因为我想让画布在窗口中自动水平居中，当窗口大小改变时，它与文本输入同步。

我应该给这两个元素什么样式设置，使文本字段保持在画布上的同一位置?

我找到了一个解决方案: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>

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

这是来自另一个StackOverflow页面:

按钮居中于画布

给canvas元素的位置:relative，给message元素的位置:absolute。然后使用top &左键定位信息

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

#message {
  position:absolute;
  top:150px;
  left:100px;
}
https://jsfiddle.net/ebkpcsvg/1/

相关文章：