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

Question

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

Как бы я это сделал?

Answer 1

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

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

_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

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

Answer 3

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

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

Answer 4

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

Answer 5

Вы можете поставить кнопку на верхней части 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 6

Один из способов кнопку, чтобы добавить динамически в верхней части холста следующие два следующих пунктов: 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'); 
});