我可以在画布中放一个HTML按钮吗？

Question

我想制作我正在制作的游戏按钮作为真正的HTML按钮,但它们需要在画布内.

我该怎么做呢？

Answer 1

鉴于canvas元素具有透明内容模型,它可能包含在不支持该元素的情况下显示的回退元素canvas.如果支持画布,则不会显示它们.

您可以相对于画布的父级定位HTML元素,以使按钮"悬停"在画布上.甲菜单元件可以是适当的语义元素来呈现的控件的列表,这取决于上下文:

_HTML:

<div id="container">
  <canvas id="viewport">
  </canvas>
  <menu id="controls">
  </menu>
</div>

_CSS:

#container
{
  height: 400px;
  position: relative;
  width: 400px;
}
#viewport
{
  height: 100%;
  width: 100%;
}
#controls
{
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
}

Answer 2

您可以canvas通过给画布z-index低于按钮的按钮将按钮放在顶部z-index:

<canvas style="z-index:1"></canvas>
<input type="button" style="z-index:2; position:absolute; top:x; left:y" value="test"/>

在哪里x和y是数字.

Answer 3

我认为您无法将HTML内容“放入”画布标签。如果浏览器不支持，则无论您放置在其中的内容都将实际显示<canvas>。

但是，您可以将按钮完全定位在画布上方，也可以在画布中渲染“看起来”像按钮的区域并自己处理事件（很多工作）。

Answer 4

画布内的 HTML 是不可能的，但也许您可以绝对定位您的元素，以便它们“浮动”在画布上，而不是在画布内。