Game Canvas
Het HTML <canvas>-element wordt weergegeven als een rechthoekig object op een webpagina:
HTML-canvas
Het <canvas>element is perfect voor het maken van games in HTML.
Het <canvas>element biedt alle functionaliteit die je nodig hebt voor het maken van games.
Gebruik JavaScript om te tekenen, schrijven, afbeeldingen in te voegen en meer, op het
<canvas>.
.getContext("2d")
Het <canvas>element heeft een ingebouwd object, het getContext("2d")object genaamd, met methoden en eigenschappen voor tekenen.
Je kunt meer leren over het <canvas>element en het
getContext("2d")object in onze Canvas-zelfstudie .
Begin
Om een spel te maken, begin je met het maken van een speelgebied en maak je het klaar om te tekenen:
Voorbeeld
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]);
}
}
Het object myGameAreaheeft later in deze zelfstudie meer eigenschappen en methoden.
De functie startGame()roept de methode
start()van het
myGameAreaobject op.
De
start()methode maakt een <canvas>element aan en voegt het in als de eerste childnode van het <body>element.