Die HTML <canvas> Element wird als ein rechteckiges Objekt auf einer Webseite angezeigt:
HTML Canvas
Das <canvas> Element ist perfekt für Spiele in HTML zu machen.
Das <canvas> Element bietet alle Funktionen , die Sie für die Herstellung von Spielen benötigen.
Verwenden Sie JavaScript zu zeichnen, schreiben, Bilder einfügen und vieles mehr, auf die <canvas> .
.getContext ( "2d")
Das <canvas> Element hat einen eingebauten Objekt, die genannt getContext("2d") Objekt, mit Methoden und Eigenschaften für das Zeichnen.
Sie können mehr über das erfahren <canvas> Element, und die getContext("2d") Objekt, in unserem Leinwand - Tutorial .
Sich aufmachen
Um ein Spiel zu machen, beginnen mit einem Gaming-Bereich zu schaffen und machen sie bereit für das Zeichnen:
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]);
}
}
Versuch es selber " Das Objekt myGameArea mehr Eigenschaften und Methoden haben später in diesem Tutorial.
Die Funktion startGame() ruft die Methode start() des myGameArea Objekt.
Der start() Methode erstellt ein <canvas> Element und fügt sie als erste childNode des <body> Element.