L'HTML <canvas> elemento viene visualizzato come un oggetto rettangolare su una pagina Web:
HTML Canvas
Il <canvas> elemento è perfetto per fare i giochi in formato HTML.
Il <canvas> elemento offre tutte le funzionalità necessarie per fare giochi.
Utilizzare JavaScript per disegnare, scrivere, inserire immagini, e di più, sui <canvas> .
.getContext ( "2D")
Il <canvas> elemento ha un oggetto, chiamato in built- getContext("2d") oggetto, con i metodi e le proprietà per il disegno.
È possibile saperne di più sul <canvas> elemento, e il getContext("2d") oggetto, nel nostro tutorial su tela .
Iniziare
Per fare un gioco, inizia con la creazione di una zona di gioco, e renderlo pronto per il disegno:
Esempio
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 tu stesso " L'oggetto myGameArea avrà più proprietà e metodi più avanti in questo tutorial.
La funzione startGame() richiama il metodo start() del myGameArea oggetto.
La start() metodo crea un <canvas> elemento e lo inserisce come primo childNode del <body> elemento.