Posso inserire un pulsante HTML all'interno dell'area di disegno?

Question

Voglio rendere i pulsanti per il gioco che sto facendo come veri pulsanti HTML, ma devono essere all'interno della tela.

Come faccio a fare questo?

Answer 1

Dato che il canvas element ha un transparent content model, esso può contenere fallback elementi che vengono visualizzati nel caso in cui l'elemento canvas è supportato. Verranno visualizzati non se la tela è supportata.

È possibile posizionare gli elementi HTML relativi al genitore dell'area di disegno per far sì che i pulsanti "passino" sopra l'area di disegno. Un menu element potrebbe essere un elemento opportunamente semantica per rendere un elenco di controlli, a seconda del contesto:

_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 all'interno della tela non è possibile, ma forse è possibile posizionare gli elementi in modo assoluto in modo che siano "mobili" sulla tela, ma non al suo interno.

Answer 3

Non credo che si possa "inserire" contenuto HTML all'interno di un tag canvas. Qualsiasi cosa venga inserita, verrà visualizzata se il browser non supporta<canvas>.

È possibile, tuttavia, posizionare i pulsanti su un'area di disegno o un'area di rendering nella tela che "assomigliano" ai pulsanti e gestiscono autonomamente gli eventi (molto lavoro).

Answer 4

HTML all'interno della tela non è possibile.
Ma se vuoi davvero usare i pulsanti, perché non provi a posizionare i pulsanti sulla parte superiore della tela?

Answer 5

Si può mettere il pulsante sulla parte superiore del canvas dando la tela un z-index, che è inferiore alla z-index del pulsante:

<canvas style="z-index:1"></canvas> 
<input type="button" style="z-index:2; position:absolute; top:x; left:y" value="test"/> 

dove x e y sono numeri.

Answer 6

Un modo per aggiungere dinamicamente pulsante sulla parte superiore della tela segue i due punti successivi: 1. Facendo zIndex del pulsante superiore tela 2. Posizionare il pulsante con posizionamento assoluto con piano desiderato e il valore

sinistra

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