Spiel-Leinwand
Das HTML <canvas>-Element wird als rechteckiges Objekt auf einer Webseite dargestellt:
HTML-Leinwand
Das <canvas>Element eignet sich perfekt zum Erstellen von Spielen in HTML.
Das <canvas>Element bietet alle Funktionen, die Sie zum Erstellen von Spielen benötigen.
Verwenden Sie JavaScript zum Zeichnen, Schreiben, Einfügen von Bildern und mehr in die
<canvas>.
.getContext("2d")
Das <canvas>Element verfügt über ein integriertes Objekt, das als getContext("2d")Objekt bezeichnet wird, mit Methoden und Eigenschaften zum Zeichnen.
In unserem Canvas-Tutorial erfahren Sie mehr über das <canvas>Element und das Objekt .
getContext("2d")
Loslegen
Um ein Spiel zu erstellen, erstellen Sie zunächst einen Spielbereich und bereiten Sie ihn zum Zeichnen vor:
Beispiel
function startGame() {
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
}
Das Objekt myGameAreawird später in diesem Lernprogramm über weitere Eigenschaften und Methoden verfügen.
Die Funktion startGame()ruft die Methode
start()des
myGameAreaObjekts auf.
Die
start()Methode erstellt ein <canvas>Element und fügt es als ersten untergeordneten Knoten des <body>Elements ein.