Le code HTML <canvas> élément est affiché sous la forme d' un objet rectangulaire sur une page web:
HTML Canvas
Le <canvas> élément est parfait pour faire des jeux en HTML.
Le <canvas> élément offre toutes les fonctionnalités dont vous avez besoin pour faire des jeux.
Utilisez JavaScript pour dessiner, écrire, insérer des images, et plus encore, sur les <canvas> .
.getContext ( "2d")
Le <canvas> élément a un haut-objet, appelé getContext("2d") objet, avec des méthodes et des propriétés pour le dessin.
Vous pouvez en apprendre davantage sur le <canvas> élément, et l' getContext("2d") objet, dans notre Tutoriel Canvas .
Commencer
Pour faire un jeu, commencez par créer une zone de jeu, et le rendre prêt pour le dessin:
Exemple
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]);
}
}
Essayez - le vous - même » L'objet myGameArea aura plus de propriétés et méthodes plus loin dans ce tutoriel.
La fonction startGame() appelle la méthode start() du myGameArea objet.
La start() méthode crée un <canvas> élément et l' insère comme la première childNode du <body> élément.