Spel canvas

HTML <canvas> element visas som rektangulära objekt på webbsidan:

HTML Canvas

<canvas> element är mycket lämpligt för utveckling av spel i HTML.

<canvas> elementet erbjuder alla funktioner som behövs för att skapa spel.

Använd JavaScript för att rita i <canvas> ritning, textskrivning, infoga bilder och mer.

.getContext("2d")

<canvas> element har en inbyggd objekt som kallas getContext("2d") objektet, som erbjuder metoder och egenskaper för ritning.

Du kan hitta mer information om Canvas Tutorial lär dig mer om <canvas> element och getContext("2d") mer information om objektet.

Så, börja nu

För att skapa ett spel, skapa först ett spelområde och förbered dig för att rita:

exempel

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

prova själv

I en senare del av denna tutorial, objekt min spelområde kommer att få fler egenskaper och metoder.

funktion startGame() anrop min spelområde 对象的 start() metoden.

start() metoden skapar en <canvas> element, och som den första undernoden infogas i <body> i elementen.