2012-11-17 10 views
8

Ich versuche mein erstes HTML5-Spiel zu schreiben, indem ich eine Kombination aus Canvas und der exzellenten KineticJS-Bibliothek benutze und schon früh ein bisschen eine Wand getroffen habe.Erlaube dem Benutzer, Text in ein HTML5 Canvas-Spiel einzugeben

Ich möchte den Benutzer bitten, seinen Namen in einer 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 verwende, bekomme.

Ist das korrekt?

Nachdem ich auf einer Menge Flash- und Web-Spiele aufgewachsen bin, bin ich sicher, jedes Mal, wenn ich einen Namen eingeben oder den Dateinamen speichern muss, ist es direkt im Spiel selbst und es verlässt sich nicht auf das HTML generieren Sie es?

Alle Ratschläge, wie dies zu tun wäre dankbar angenommen.

+0

Ich glaube nicht, es eine aus der Box-Fähigkeit in Kinetic ist JS zum Hinzufügen eines Textfelds. Weitere Informationen finden Sie in der KineticJS-Dokumentation: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-tutorial/ Es beantwortet die meisten Ihrer Fragen. Sie müssen einen Textbereich in der Zeichenfläche erstellen, indem Sie Ereignishandler für Key Strokes in einem Rechteck hinzufügen. Zeigen Sie anschließend den Text an, der vom Benutzer in der Zeichenfläche in einem bestimmten Format empfangen wurde. – Amber

+0

Das bespricht das Platzieren von Text auf der Zeichenfläche, nicht die Erfassung von Text von einem Benutzer. Ich benutze bereits eine Menge KineticJS Text um meine Buttons zu erstellen, was ich möchte ist eine Art zu sagen, Bitte geben Sie Ihren Namen ein: (wird das Textattribut verwenden) und dann den Text innerhalb einer Canvas JS Funktion erfassen. – Craigeve

+0

Ich habe gerade meine Antwort bearbeitet. In Kinetic JS gibt es keine HTML-Textbereiche. – Amber

Antwort

3

Sie können ein schwebendes HTML-Element oben auf der Zeichenfläche mithilfe der folgenden CSS-Technik erhalten.

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

  • Machen Sie einen Wrapper div position: relative

  • Leinwand inside Position mit: absolute

  • In anderen HTML-Steuerelemente in Position mit: absolute

Diese Applie s für alle HTML-Elemente, nicht nur für Canvas.

+0

Ich werde ehrlich sein, ich bin eher ein Javascript/Java-Programmierer als ein HTML-Programmierer. Also habe ich CSS im Moment ignoriert (also keinen