我可以在畫布中放一個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>

使用示例 。