web-dev-qa-db-ger.com

Kann ich eine HTML-Schaltfläche in die Leinwand einfügen?

Ich möchte die Schaltflächen für das Spiel, das ich mache, als echte HTML-Schaltflächen erstellen, aber sie müssen sich auf der Leinwand befinden.

Wie würde ich das machen?

31
CyanPrime

Da das Canvas-Element ein transparentes Inhaltsmodell hat, kann es Fallback - Elemente enthalten, die angezeigt werden, wenn das canvas-Element nicht unterstützt wird. Sie werden not angezeigt, wenn die Leinwand unterstützt wird.

Sie können HTML-Elemente relativ zum übergeordneten Element der Leinwand positionieren, damit die Schaltflächen über der Leinwand „schweben“. Ein Menüelement kann je nach Kontext ein entsprechend semantisches Element zum Rendern einer Liste von Steuerelementen sein:

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%;
}
42
zzzzBov

Sie können die Schaltfläche auf die Variable canvas setzen, indem Sie der Zeichenfläche einen z-index geben, der niedriger ist als der z-index der Schaltfläche:

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

dabei sind x und y Zahlen.

8
Alex

HTML innerhalb der Zeichenfläche ist nicht möglich, aber Sie könnten Ihre Elemente möglicherweise absolut positionieren, so dass sie über der Leinwand "schweben", jedoch nicht innerhalb der Zeichenfläche.

4
sidyll

Ich glaube nicht, dass Sie HTML-Inhalte in ein Canvas-Tag einfügen können. Was auch immer Sie dort eingeben, wird tatsächlich angezeigt, wenn der Browser nicht <canvas> unterstützt.

Sie können Ihre Schaltflächen jedoch absolut über einer Leinwand positionieren oder Bereiche auf Ihrer Leinwand darstellen, die wie Schaltflächen aussehen und die Ereignisse selbst behandeln (viel Arbeit).

4
Paul Spencer

Eine Möglichkeit, die Schaltfläche dynamisch auf der Leinwandoberfläche hinzuzufügen, besteht darin, die nächsten zwei Punkte zu befolgen: 1. ZIndex der Schaltfläche höher als die Leinwand festlegen 2. Positionieren Sie die Schaltfläche in absoluter Positionierung mit dem gewünschten oberen und linken Wert 

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 in Canvas ist nicht möglich.
Wenn Sie jedoch wirklich Knöpfe verwenden möchten, versuchen Sie es nicht, die Knöpfe auf der Leinwand zu positionieren.

0
gion_13

Sie können mein DropdownMen verwenden, um eine HTML-Schaltfläche oder ein HTML-Menü in die Zeichenfläche einzufügen.

Beispiel des Codes:

<div class="container" id="containerDSE">
    <canvas id="canvas"></canvas>
</div>
<script>
var elContainer = document.getElementById( "containerDSE" ),
elCanvas = elContainer.querySelector( 'canvas' );

dropdownMenu.create( [

    {

        name: 'Button',
        onclick: function ( event ) {

            var message = 'Button onclick';
            //console.log( message );
            alert( message )

        },

    },

], {

    elParent: elContainer,
    canvas: elCanvas,
    decorations: 'Transparent',

} );
</script>

Beispiel von using.

0
Andrej

Sie können eine Schaltfläche in die Leinwand einfügen (png, jpg, svg und text), indem Sie die Canvate-Bibliothek verwenden http://www.sakuracode.com/canvate

Hier sehen Sie ein Beispiel für einen Draging-Button in der Leinwand.

container.startDrag();

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

0
Eese