Question

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

我将如何做到这一点？

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

Answer 2

您可以通过为画布提供低于按钮的canvas的{{1}}来将按钮放在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是数字。

Answer 3

画布中的HTML是不可能的，但也许你可以绝对定位你的元素，使它们在画布上“漂浮”，但不在其中。

Answer 4

我不相信你可以在画布标签中“放置”HTML内容。如果浏览器不支持<canvas>，那么无论您输入什么内容都会显示。

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

Answer 5

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

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

HTML：

<canvas id="canvas" width="200" height="200">           
 </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');
});

Answer 6

画布内的HTML是不可能的。
但是如果你真的想使用按钮，为什么不尝试将按钮放在画布顶部？

Answer 7

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

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

container.startDrag();

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

Answer 8

您可以使用我的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的使用。

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

8 个答案: