Puis-je mettre un bouton HTML dans le canevas?
Je veux faire les boutons pour le jeu que je fais comme de vrais boutons HTML, mais ils doivent être à l'intérieur de la toile.
Comment pourrais-je faire cela?
7 réponses
Étant donné que l'élément canvas a un modèle de contenutransparent , il peut contenir des élémentsfallback qui sont affichés dans le cas où l'élément canvas n'est pas pris en charge. Ils seront Pas affichés si le canevas est pris en charge.
Vous pouvez positionner les éléments HTML par rapport au parent du canevas pour que les boutons "planent" sur le canevas. Un élément de menu pourrait être un élément sémantique approprié pour rendre une liste de contrôles, selon le contexte:
HTML:<div id="container">
<canvas id="viewport">
</canvas>
<menu id="controls">
</menu>
</div>
#container
{
height: 400px;
position: relative;
width: 400px;
}
#viewport
{
height: 100%;
width: 100%;
}
#controls
{
bottom: 0;
left: 0;
position: absolute;
width: 100%;
}
Vous pouvez placer le bouton sur le dessus du canvas en donnant à la toile un {[2] } qui est 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.
HTML à l'intérieur du canevas n'est pas possible, mais peut-être que vous pourriez positionner vos éléments absolument de sorte qu'ils "flottent" sur le canevas, mais pas à l'intérieur.
Je ne crois pas que vous puissiez 'mettre' du contenu HTML dans une balise canvas. Tout ce que vous y mettez sera réellement affiché si le navigateur ne prend pas en charge <canvas>.
Vous pouvez cependant placer vos boutons absolument au-dessus d'une toile ou rendre des zones dans votre toile qui "ressemblent" à des boutons et gérer les événements vous-même (beaucoup de travail).
Une façon d'ajouter un bouton dynamiquement en haut de la toile suit les deux points suivants: 1. Faire zIndex du bouton plus élevé que Toile 2. Positionnez le bouton à l'aide d'un 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');
});
HTML à l'intérieur de canvas n'est pas possible.
Mais si vous voulez vraiment utiliser des boutons, pourquoi ne pas essayer de positionner les boutons sur le dessus de la toile?
Vous pouvez placer un bouton dans le canevas (png, jpg, svg et texte), en utilisant la bibliothèque Canvate. http://www.sakuracode.com/canvate
Voici un échantillon d'un bouton de dragging à l'intérieur du canevas.
container.startDrag();