Spil canvas

HTML <canvas> element vises som en rektangulær objekt på internettet:

HTML Canvas

<canvas> elementet er meget egnet til at udvikle spil i HTML.

<canvas> elementet tilbyder alle funktioner, der er nødvendige for at lave et spil.

Brug JavaScript i <canvas> til tegning, skriv tekst, indsæt billeder osv.

.getContext("2d")

<canvas> elementet har en indbygget objekt kaldet getContext("2d") objektet, som tilbyder metoder og egenskaber til tegning.

Du kan finde mere om Canvas Tutorial lær om <canvas> elementer og getContext("2d") mere om objektet.

Så, kom i gang

For at lave et spil skal du først oprette et spilområde og forberede dig til at tegne:

eksempel

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]);
  }
}

prøv det selv

I senere del af denne tutorial, objektet minSpilområde vil få flere egenskaber og metoder.

funktion startGame() kalder minSpilområde 对象的 start() metode.

start() metode oprettede en <canvas> element, og som den første undernode indsættes i <body> i elementet.