Erlaubt dem Benutzer, Text in ein HTML5 Canvas-Spiel einzugeben
Ich versuche, mein erstes HTML5-Spiel mit einer Kombination aus Canvas und der exzellenten KineticJS-Bibliothek zu schreiben, und ich habe schon früh eine kleine Wand getroffen.
Ich möchte den Benutzer bitten, seinen Namen in eine Box im Spiel einzugeben. Nachdem ich einige Nachforschungen angestellt habe, sehe ich keinen Weg, dies zu tun, indem ich ein schwebendes HTML-Element über den Teil der Leinwand, den ich benutze, bekomme.
Stimmt das?
Nachdem ich in vielen Flash- und Web-Spielen aufgewachsen bin, bin ich mir sicher, dass ich jedes Mal, wenn ich einen Namen oder Dateinamen speichere, direkt in das Spiel selbst gehe und es nicht auf die HTML-Generierung angewiesen ist es?
Jeder Rat, wie dies zu tun wäre, würde dankbar empfangen werden.
3 Antworten
Sie können ein schwebendes HTML-Element oben auf der Zeichenfläche mithilfe der folgenden CSS-Technik erhalten.
-
Erstellen Sie eine Wrapper Div-Position: relativ
-
Fügen Sie Canvas innen mit position: absolute
hinzu
-
Fügen Sie weitere HTML-Steuerelemente mit position: absolute
hinzu
Dies gilt für alle HTML-Elemente, nicht nur für Canvas.
Ich weiß, das ist irgendwie alt aber ....
Leinwandeingabe ist eine großartige Bibliothek, die ich Verwenden Sie in meinem Spiel:
Wie Sie sehen können, kann ich die Box eingeben und sie auf dem Bildschirm anzeigen lassen. Es ist einfach zu bedienen:
%Vor%Haftungsausschluss: Ich bin in keiner Weise mit CanvasInput verbunden und erhalte nichts für diesen Beitrag:)
Tags und Links html5 canvas html5-canvas kineticjs