¿Puedo poner un botón HTML dentro del lienzo?

Question

Quiero hacer los botones del juego que estoy creando como botones HTML reales, pero deben estar dentro del lienzo.

¿Cómo voy a hacer esto?

Answer 1

Dado que la canvas element tiene una transparent content model, puede contener fallback elementos que se muestran en el caso de que el elemento de canvas no es compatible. Se mostrarán no si el lienzo es compatible.

Puede colocar elementos HTML relativos al elemento primario del lienzo para que los botones "se ciernen" sobre el lienzo. Un menu element podría ser un elemento adecuadamente semántica para hacer una lista de controles, dependiendo del contexto:

_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 dentro del lienzo no es posible, pero tal vez podría colocar sus elementos absolutamente para que estén "flotando" sobre el lienzo, pero no dentro de él.

Answer 3

No creo que pueda 'poner' contenido HTML dentro de una etiqueta canvas. Cualquier cosa que coloque allí realmente se mostrará si el navegador no admite<canvas>.

Puede, sin embargo, colocar los botones sobre la parte superior de un lienzo o representar las áreas de su lienzo que se "parecen" a los botones y manejar los eventos usted mismo (mucho trabajo).

Answer 4

HTML dentro de la tela no es posible.
Pero si realmente quiere usar botones, ¿por qué no intenta ubicar los botones en la parte superior del lienzo?

Answer 5

Usted puede poner el botón en la parte superior de la canvas dando el lienzo un z-index que es inferior a la z-index del botón:

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

donde x y y son números.

Answer 6

Una forma de añadir botón dinámicamente en la parte superior de la tela está siguiendo los siguientes dos puntos: 1. Haciendo zIndex del botón más alta que la lona 2. Coloque el botón utilizando posicionamiento absoluto con la parte superior deseado y el valor

dejó

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