Canvas

HTML5 para Jogos (parte 2)

Se você perdeu a parte anterior, acesse-a aqui: Parte 1

Antes de mais nada, vamos estudar o elemento onde a animação acontece: o canvas.

Conforme a wiki do World Wide Web Consortium (W3C), o canvas é um elemento que scripts podem utilizar para renderizar (vulgo desenhar) imagens. Obviamente, se a taxa de atualização das imagens for suficiente, podem-se criar animações, como a vista na Parte 1.

Então, vamos ver como ele é declarado no exemplo disponível em http://jsbin.com/nexaco/ (melhor visualização no Google Chrome)

<html>
  <head>
    <script type="text/javascript" src="sprites.js"></script>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
  </head>
  <body>
    <p>Use as setas do teclado para mover a personagem</p>
    <canvas id="canvas" width="640" height="480">
      Seu navegador não tem suporte ao 'canvas'.
    </canvas>
  </body>
</html>

Como se pode perceber na linha 12, ele é iniciado pelo nome do elemento, um identificador (id=”canvas”), que será utilizado por um script que deseje usá-lo para renderizar uma imagem, e os atributos largura (width=”640) e altura (height=”480″), ambos em pixels. Ainda, antes de fechar o elemento com </canvas>, é possível deixar uma mensagem, que será exibida apenas se o navegador não tiver suporte ao elemento.

Se quiser praticar um pouco, crie um outro canvas ou altere seus atributos para ver o que acontece. Lembre-se que, no JS Bin, para ver o código da página, é necessário clicar em Edit in JS Bin, no canto superior direito da página aberta pelo link http://jsbin.com/nexaco/.

Na continuação da série, vamos ver mais a respeito do canvas. Até lá!

Anúncios

2 comentários sobre “HTML5 para Jogos (parte 2)

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s