Можно ли поместить кнопку HTML внутри холста?

Question

Я хочу сделать кнопки для игры, которые я делаю, настоящими кнопками HTML, но они должны быть внутри холста.

Как мне это сделать?

Answer 1

Учитывая, что элемент canvas имеет модель прозрачного содержимого , он может содержать элементы fallback , которые отображаются, если элемент 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 внутри тега canvas. Все, что вы введете, будет отображаться, если браузер не поддерживает <canvas>.

Однако вы можете расположить свои кнопки абсолютно поверх холста или визуализировать области на холсте, которые «выглядят» как кнопки, и обрабатывать события самостоятельно (много работы).

Answer 4

HTML внутри canvas не возможен, но, возможно, вы могли бы расположить свои элементы абсолютно так, чтобы они «плавали» над холстом, но не внутри него.

Answer 5

Один из способов динамического добавления кнопки в верхней части холста - следующие два пункта: 1. Делаем zIndex кнопки выше, чем canvas 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

Вы можете использовать мое 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>

Пример использования .

Answer 7

Вы можете поместить кнопку внутри холста (png, jpg, svg и text), используя библиотеку Canvate.http://www.sakuracode.com/canvate

Вот пример перетаскивающей кнопки внутри холста.

container.startDrag();

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

Answer 8

HTML внутри холста невозможен.
Но если вы действительно хотите использовать кнопки, почему бы вам не попробовать расположить кнопки сверху холста?