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

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

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

Ответ 1

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

Вы можете расположить элементы HTML относительно родителя canvas, чтобы кнопки "зависали" над холстом. Элемент меню может быть соответствующим семантическим элементом для отображения списка элементов управления в зависимости от контекста:

<Суб > 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

Вы можете поместить кнопку поверх canvas, предоставив холст a 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 - числа.

Ответ 3

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

Ответ 4

Я не верю, что вы можете "помещать" содержимое HTML внутри тега canvas. Все, что вы там разместите, будет отображаться, если браузер не поддерживает <canvas>.

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

Ответ 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');
});

Ответ 6

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

Ответ 7

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

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

container.startDrag();

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

Ответ 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>

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