O HTML <canvas> elemento é exibido como um objeto retangular em uma página web:
Canvas HTML
O <canvas> elemento é perfeito para fazer jogos em HTML.
O <canvas> elemento oferece todas as funcionalidades que você precisa para fazer jogos.
Use JavaScript para desenhar, escrever, inserir imagens, e mais, para as <canvas> .
.getContext ( "2d")
O <canvas> elemento tem um built-in objeto, chamado de getContext("2d") objeto, com métodos e propriedades para desenho.
Você pode aprender mais sobre o <canvas> elemento, eo getContext("2d") objeto, no nosso Tutorial lona .
Começar
Para fazer um jogo, comece por criar uma área de jogo e torná-lo pronto para o desenho:
Exemplo
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]);
}
}
Tente você mesmo " O objeto myGameArea terá mais propriedades e métodos mais adiante neste tutorial.
A função startGame() chama o método start() do myGameArea objeto.
O start() método cria um <canvas> elemento e insere-lo como o primeiro childNode do <body> elemento.