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

Posted 2023-03-05

【中文标题】我可以在画布内放置一个 HTML 按钮吗？

【英文标题】：Can I put an HTML button inside the canvas?

【发布时间】：2011-06-15 10:15:23

【问题描述】：

我想为我正在制作的游戏制作真正的 html 按钮，但它们需要在画布内。

我该怎么做呢？

【参考方案1】：

鉴于canvas element 有一个transparent content model，它可能包含fallback 元素，这些元素会在canvas 元素不受支持的情况下显示。如果画布受支持，它们将不显示。

您可以相对于画布的父元素定位 HTML 元素，以使按钮“悬停”在画布上。 menu element 可以是适当的语义元素，用于呈现控件列表，具体取决于上下文：

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

【讨论】：

不需要使用menu。您可以通过这种方式在画布上显示几乎任何 HTML 元素。

@peci1，我为这种情况选择了<menu>，因为它是语义化的，而不是因为它对<canvas> 做了任何特别的事情。

但是当我将画布全屏显示时，按钮消失了。有什么办法可以克服吗？

【参考方案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 是数字。

【讨论】：

我发现这在 chrome 中有效，但对于 Firefox，我必须给画布一个负 z-index。

【参考方案3】：

我不相信您可以将 HTML 内容“放入”画布标签中。如果浏览器不支持<canvas>，您输入的任何内容都会实际显示出来。

但是，您可以将按钮绝对放置在画布顶部或在画布中呈现“看起来”像按钮的区域并自己处理事件（大量工作）。

【讨论】：

你的意思是你放在画布里的任何东西 element （不是标签）;)

【参考方案4】：

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

【参考方案5】：

在画布顶部动态添加按钮的一种方法是遵循以下两点： 1.使按钮的zIndex高于canvas 2. 使用绝对定位和所需的顶部和左侧值定位按钮

Jsfiddle：https://jsfiddle.net/n2EYw/398/

HTML：

<canvas id="canvas"  >           
 </canvas>

CSS：

canvas 
    border: 1px dotted black;
    background: navy;

javascript：

var $testButton = $('<input/>').attr(
    type: 'button',
    name: 'btn1',
    value: 'TestButton',
    id: 'testButton',
    style: 'position:absolute; top:50px;left:100px; zindex:2'
);
$('body').append($testButton);
$(document).on("click", "#testButton", function() 
    alert('button clicked');
);

【讨论】：

嘿，您在 HTML 中添加了按钮，而不是在画布中。

【参考方案6】：

您可以使用我的DropdownMenu 在画布内放置一个 HTML 按钮或菜单。

Example的代码：

<div class="container" id="containerDSE">
    <canvas id="canvas"></canvas>
</div>
<script>
var elContainer = document.getElementById( "containerDSE" ),
elCanvas = elContainer.querySelector( 'canvas' );

dropdownMenu.create( [

    

        name: 'Button',
        onclick: function ( event ) 

            var message = 'Button onclick';
            //console.log( message );
            alert( message )

        ,

    ,

], 

    elParent: elContainer,
    canvas: elCanvas,
    decorations: 'Transparent',

 );
</script>

Example 的使用。

【参考方案7】：

无法在画布中使用 HTML。 但是如果你真的想使用按钮，为什么不尝试将按钮放置在画布的顶部呢？

【参考方案8】：

您可以使用 Canvate 库在画布（png、jpg、svg 和文本）中放置一个按钮。 http://www.sakuracode.com/canvate

这是画布内拖动按钮的示例。

container.startDrag();

https://codepen.io/EiseiKashi/pen/BxNbmj