Frage von PattuXD, 28

Javasript, HTML5 und Canvas?

Moin,

ich soll fürs Studium ne HTML-Seite inkl. Spiel erstellen. Für das Spiel brauch ich n Canvas, darüber wurde uns aber nichts gesagt, daher jetzt einige Probleme damit.

Also ich hab in der HTML Datei ein canvas erstellt mit id="game". In der ausgelagerten .js Datei will ich jetzt darauf zugreifen. Ich brauche (Zitat) "Variablen für den Canvas-Kontext, die Zeichenfläche, Breite und Höhe der Zeichenfläche". Also ich hab n bisschen gegoogelt und das Canvas hab ich mir jetzt mit

var canvas = document.getElementById('game');

geholt. Außerdem den Kontext mit

var context = element.getContext('2d');

Das ist zugegeben alles copy-pasted ausm Internet und angepasst und ich habe jetzt nicht wirklich ne Ahnung, wie ich Höhe und Breite abrufen kann. Zudem kann ich mir unter den Variablen nichts vorstellen. Was beinhalten die jetzt genau und was kann ich mit denen machen? Und muss ich eigentlich noch irgendwas machen mit dem Canvas in .js oder reicht das, wenn ich in der HTML Datei Width und Height festgelegt hab?

Danke schonmal für alle Antworten :)

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von heilwigkenner, 28

Ich würde dir diesen Link nahelegen: 

http://www.w3schools.com/html/html5_canvas.asp

Kommentar von PattuXD ,

Also die Attribute abrufen verrät mir das zwar nicht, das hat aber der andere Kommentar (canvas.width sowie canvas.height) ja offenbart.
Die Seite hilft (zumindest mir), zu verstehen, wie ein Canvas funktioniert und wenn man das erstmal verstanden hat, sind auch die Befehle sehr intuitiv.
Die einzige Frage, die mir immer noch bleibt: Was ist "context"? Also offensichtlich hat das was mit 2d zu tun, vermutlich gibt es also noch 3d oder sowas, aber was bringt mir/dem Programm das, dass ich das spezifiziere? Nur um klar zu machen, welche Attribute und Methoden ich brauche?

Kommentar von fluffiknuffi ,


Also offensichtlich hat das was mit 2d zu tun, vermutlich gibt es also noch 3d

Ja, 3D = "webgl".

Außerdem können Parameter übergeben werden wie antialias, der bestimmt, ob anti-aliasing verwendet werden soll.

Siehe https://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/getContext

Antwort
von userfromberlin, 20

canvas.width sowie canvas.height!

Keine passende Antwort gefunden?

Fragen Sie die Community