Puis-je mettre un bouton HTML à l'intérieur du canevas ?

Question

Je veux que les boutons du jeu que je crée soient de vrais boutons HTML, mais ils doivent être à l'intérieur du canevas.

Comment ferais-je pour faire ça ?

Answer 1

Vous pouvez placer le bouton au-dessus du canvas en donnant au canevas un z-index inférieur au z-index du bouton :

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

où x et y sont des nombres.

Answer 2

Je ne crois pas que vous puissiez « mettre » du contenu HTML dans une balise canvas. Tout ce que vous y mettez sera affiché si le navigateur ne prend pas en charge <canvas> .

Vous pouvez, cependant, positionner vos boutons absolument au-dessus d'un canevas ou rendre des zones de votre canevas qui « ressemblent » à des boutons et gérer les événements vous-même (beaucoup de travail).

Answer 3

Le HTML à l'intérieur du canevas n'est pas possible, mais vous pourriez peut-être positionner vos éléments de manière à ce qu'ils « flottent » sur le canevas, mais pas à l'intérieur.

Answer 4

Une façon d'ajouter dynamiquement un bouton en haut du canevas consiste à suivre les deux points suivants : 1. Rendre le zIndex du bouton plus élevé que le canevas 2. Positionnez le bouton en utilisant le positionnement absolu avec les valeurs souhaitées en haut et à gauche

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