我可以在画布中放置一个 HTML 按钮吗? [英] Can I put an HTML button inside the canvas?

问题描述

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

我该怎么做?

解决方案

鉴于 canvas 元素 有一个 透明内容模型，它可能包含在 canvas 元素不受支持的情况下显示的 fallback 元素.如果支持画布，它们将不显示.

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

_HTML:

<canvas id="视口"></画布><menu id="控件"></菜单>

_CSS:

#container{高度:400px；位置:相对；宽度:400px；}#视口{高度:100%；宽度:100%；}#控制{底部:0；左:0；位置:绝对；宽度:100%；}

I want to make the buttons for the game I'm making as real HTML buttons, but they need to be inside the canvas.

How would I go about doing this?

解决方案

Given that the canvas element has a transparent content model, it may contain fallback elements which are displayed in the event that the canvas element is unsupported. They will not be displayed if the canvas is supported.

You can position HTML elements relative to the canvas' parent to have the buttons "hovering" over the canvas. A menu element could be an appropriately semantic element to render a list of controls, depending on the context:

_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%;
}

这篇关于我可以在画布中放置一个 HTML 按钮吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！