web-dev-qa-db-fra.com

Puis-je insérer un bouton HTML dans le canevas?

Je veux créer des boutons pour le jeu que je crée comme de vrais boutons HTML, mais ils doivent être à l'intérieur du canevas.

Comment pourrais-je m'y prendre?

javascripthtmlcsshtml5canvas
31
CyanPrime

Vous pouvez placer le bouton au-dessus de canvas en donnant à la grille 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.

8
Alex

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.

4
sidyll

Je ne crois pas que vous puissiez "insérer" du contenu HTML dans une balise canvas. Quoi que vous mettiez dedans, ce sera réellement affiché si le navigateur ne le fait pas supporte <canvas>.

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

4
Paul Spencer

Une façon d’ajouter un bouton dynamiquement en haut de la grille consiste à suivre les deux points suivants: 1. Rendre zIndex du bouton plus élevé que canvas 2. Positionnez le bouton en utilisant le positionnement absolu avec la valeur supérieure et gauche souhaitée. 

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

HTML à l'intérieur de la toile n'est pas possible.
Mais si vous voulez vraiment utiliser des boutons, pourquoi ne pas essayer de les positionner au-dessus de la toile?

0
gion_13

Vous pouvez insérer un bouton dans le canevas (png, jpg, svg et texte) à l'aide de la bibliothèque Canvate . http://www.sakuracode.com/canvate

Ici vous êtes un échantillon d'un bouton draging à l'intérieur de la toile.

container.startDrag();

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

0
Eese