Game Canvas

Het HTML <canvas> element wordt weergegeven als een rechthoekig object op een webpagina:

HTML Canvas

<canvas> element is ideaal voor het ontwikkelen van spellen in HTML.

<canvas> element biedt alle functies die nodig zijn om een spel te maken.

Gebruik JavaScript om te tekenen in <canvas> tekenen, tekst schrijven, afbeeldingen invoegen, enz.

.getContext("2d")

<canvas> element heeft een ingebouwde object genaamd getContext("2d") objecten, die methoden en eigenschappen bieden voor het tekenen.

Je kunt onze Canvas Tutorial leren over <canvas> elementen en getContext("2d") meer informatie over het object.

Dus, begin maar

Om een spel te maken, maak eerst een gamegebied aan en bereid je voor op 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]);
  }
}

probeer het zelf

In een later deel van deze tutorial, object myGameArea krijgt meer eigenschappen en methoden.

functie startGame() aanroepen myGameArea 对象的 start() method.

start() method created a <canvas> element, and insert it as the first child node to <body> in the element.