我可以在画布中放一个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是不可能的，但也许你可以绝对定位你的元素，以便它们在画布上“漂浮”，但不在其中。

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按钮或菜单。

代码示例 ：

<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>

使用示例 。