Javascript 我可以在画布中放置一个 HTML 按钮吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4797748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I put an HTML button inside the canvas?
提问by CyanPrime
I want to make the buttons for the game I'm making as real HTML buttons, but they need to be inside the canvas.
我想将我正在制作的游戏的按钮制作为真正的 HTML 按钮，但它们需要在画布内。
How would I go about doing this?
我该怎么做呢？
回答by zzzzBov
Given that the canvas elementhas a transparent content model, it may contain fallbackelements which are displayed in the event that the canvaselement is unsupported. They will notbe displayed if the canvas issupported.
鉴于画布元素具有透明内容模型，它可能包含在元素不受支持的情况下显示的回退元素canvas。他们会不会，如果在画布中显示的支持。
You can position HTML elements relative to the canvas' parent to have the buttons "hovering" over the canvas. A menu elementcould be an appropriately semantic element to render a list of controls, depending on the context:
您可以相对于画布的父元素定位 HTML 元素，以使按钮“悬停”在画布上。甲菜单元件可以是适当的语义元素来呈现的控件的列表，这取决于上下文：
HTML:HTML：<div id="container">
<canvas id="viewport">
</canvas>
<menu id="controls">
</menu>
</div>
#container
{
height: 400px;
position: relative;
width: 400px;
}
#viewport
{
height: 100%;
width: 100%;
}
#controls
{
bottom: 0;
left: 0;
position: absolute;
width: 100%;
}
回答by Alex
You can put the button on top of the canvasby giving the canvas a z-indexwhich is lower than the z-indexof the button:
您可以canvas通过给画布 az-index低于z-index按钮的a来将按钮放在 的顶部：
<canvas style="z-index:1"></canvas>
<input type="button" style="z-index:2; position:absolute; top:x; left:y" value="test"/>
where xand yare numbers.
哪里x和y是数字。
回答by Paul Spencer
I don't believe you can 'put' HTML content inside a canvas tag. Whatever you put in there will actually be displayed if the browser doesn'tsupport <canvas>.
我不相信您可以将 HTML 内容“放入”canvas 标签中。如果浏览器不支持<canvas>.
You can, however, position your buttons absolutely over top of a canvas or render areas in your canvas that 'look' like buttons and handle the events yourself (a lot of work).
但是，您可以将按钮绝对放置在画布顶部或在画布中渲染“看起来”像按钮的区域并自己处理事件（大量工作）。
回答by sidyll
HTML inside canvas is not possible, but maybe you could position your elements absolutely so that they are "floating" over the canvas, but not inside it.
画布内的 HTML 是不可能的，但也许您可以绝对定位您的元素，以便它们“浮动”在画布上，而不是在画布内。
回答by Razan Paul
One way to add button dynamically on the top of the canvas is following the next two points: 1. Making zIndex of the button higher than canvas 2. Position the button using absolute positioning with desired top and left value
在画布顶部动态添加按钮的一种方法是遵循以下两点： 1. 使按钮的 zIndex 高于画布 2. 使用具有所需顶部和左侧值的绝对定位来定位按钮
Jsfiddle: https://jsfiddle.net/n2EYw/398/
jsfiddle：https://jsfiddle.net/n2EYw/398/
HTML:
HTML：
<canvas id="canvas" width="200" height="200">
</canvas>
CSS:
CSS：
canvas {
border: 1px dotted black;
background: navy;
}
JavaScript:
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');
});
回答by Andrej
You can use my DropdownMenufor put an HTML button or menu inside the canvas.
您可以使用我的DropdownMenu在画布内放置 HTML 按钮或菜单。
Exampleof code:
代码示例：
<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>
Exampleof using.
使用示例。
回答by Eese
You can put a button inside the canvas (png, jpg, svg and text), using the Canvate library. http://www.sakuracode.com/canvate
您可以使用 Canvate 库在画布内放置一个按钮（png、jpg、svg 和文本）。 http://www.sakuracode.com/canvate
Here you are a sample of a draging button inside the canvas.
这是画布内拖动按钮的示例。
container.startDrag();
回答by gion_13
HTML inside of canvas is not possible.
But if you really want to use buttons, why don't you try positioning the buttons on top of the canvas?
画布内的 HTML 是不可能的。
但是，如果您真的想使用按钮，为什么不尝试将按钮放置在画布顶部呢？
