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

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?

我该怎么做呢？

7 个解决方案

#1

Given that the canvas element has a transparent content model, it may contain fallback elements which are displayed in the event that the canvas element is unsupported. They will not be displayed if the canvas is supported.

假设canvas元素具有透明的内容模型，它可能包含在不支持canvas元素的情况下显示的回退元素。如果支持画布，则不会显示它们。

You can position HTML elements relative to the canvas' parent to have the buttons "hovering" over the canvas. A menu element could be an appropriately semantic element to render a list of controls, depending on the context:

您可以相对于画布的父级定位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%;
}

#2

You can put the button on top of the canvas by giving the canvas a z-index which is lower than the z-index of the button:

您可以通过为画布提供一个低于按钮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"/>

where x and y are numbers.

其中x和y是数字。

#3

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

#4

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't support <canvas>.

我不相信你可以在画布标签中“放置”HTML内容。如果浏览器不支持

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

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

#5

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');
});

#6

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是不可能的。但如果您真的想使用按钮，为什么不尝试将按钮放在画布顶部？

#7

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和text）中放置一个按钮。 http://www.sakuracode.com/canvate

Here you are a sample of a draging button inside the canvas.

在这里，您可以看到画布内的拖动按钮。

container.startDrag();

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

#1