El HTML <canvas> elemento se muestra como un objeto rectangular en una página web:
HTML Canvas
La <canvas> elemento es perfecto para hacer juegos en HTML.
La <canvas> elemento ofrece toda la funcionalidad que necesita para hacer juegos.
Utilice JavaScript para dibujar, escribir, insertar imágenes, y más, en los <canvas> .
.getContext ( "2d")
La <canvas> elemento tiene un objeto, llamado el incorporado en getContext("2d") objeto, con métodos y propiedades de dibujo.
Usted puede aprender más sobre el <canvas> elemento, y el getContext("2d") objeto, en nuestro Tutorial de la lona .
Empieza
Para hacer un juego, empezar por la creación de una zona de juegos, y que quede listo para el dibujo:
Ejemplo
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]);
}
}
Inténtalo tú mismo " El objeto myGameArea tendrá más propiedades y métodos más adelante en este tutorial.
La función startGame() invoca el método start() de la myGameArea objeto.
El start() método crea un <canvas> elemento y lo inserta como el primer nodo hijo del <body> elemento.