Desenvolvimento - Javascript

HTML5 Canvas: Movendo objetos

Veja neste artigo como desenhar um objeto na tag canvas da HTML5 e movê-lo utilizando as setas do teclado.

por Joel Rodrigues


Introdução ao HTML5 Canvas

Os recursos gráficos que a tag canvas garante aos desenvolvedores web já são bastante comentados desde o lançamento da HTML5. Tais recursos, juntamente com outros avanços das tecnologias web básicas permitiram, por exemplo, o desenvolvimento de jogos completos utilizando apenas as web standards (HTML, CSS e Javascript).

Alguns desses jogos utilizam técnicas avançadas de renderização de imagens e desenho de elementos na tela, mas em geral a técnica utilizada (pelo menos para jogos 2D) é a seguinte: os elementos são desenhados repetidas vezes sobre uma área que é constantemente “limpa” e redesenhada.

Supondo o desenho e movimentação de um círculo na tela, o processo seria o seguinte:

  • Limpar a tela;
  • Desenhar o círculo em uma posição;
  • Limpar a tela;
  • Desenhar o círculo em outra posição;
  • Limpar a tela;
  • Desenhar o círculo em outra posição;

Dessa forma, se o processo a cima for executado em intervalos de tempos muito pequenos, haverá a impressão de continuidade, ou seja, o usuário não perceberá que a tela está sendo totalmente redesenhada a cada instante de tempo.

Neste artigo utilizaremos essa técnica para ilustrar a situação exposta acima, movimentando um círculo dentro de uma área retangular.

O código HTML do canvas

O código HTML que utilizaremos é bastante simples e pode ser visualizado na Listagem 1. O leitor pode copiar esse código e salvar como um arquivo de extensão “.html”.

Listagem 1: Código HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Canvas</title>
</head>
<body>
    <div>
        <canvas id="canvas" width="500" height="200">
        Se você visualizar esse texto, seu browser não suporta a tag canvas.
        </canvas>
    </div>
    <script type="text/javascript" src="desenhar_circulo.js"></script>
</body>
</html>

Como vemos, existe uma referência para um arquivo chamado “desenhar_circulo.js”. Nele está contido o código que de fato é responsável pelo desenho e movimentação da forma geométrica na canvas.

Esse arquivo, como veremos a seguir, é composto por várias funções que trabalharão em conjunto para se obter o resultado desejado.

O código Javascript

Inicialmente é necessário declarar algumas variáveis globais que serão utilizadas nas funções.

Listagem 2: Declaração de variáveis

var canvas;//o elemento canvas sobre o qual desenharemos
var ctx;//o "contexto" da canvas que será utilizado (2D ou 3D)
var dx = 5;//a tava de variação (velocidade) horizontal do objeto
var dy = 5;//a tava de variação (velocidade) vertical do objeto
var x = 250;//posição horizontal do objeto (com valor inicial)
var y = 100;//posição vertical do objeto (com valor inicial)
var WIDTH = 500;//largura da área retangular
var HEIGHT = 200;//altura da área retangular

As variáveis estão comentadas no código, dispensando maiores explicações.

A seguir, temos a função Desenhar, responsável literalmente por desenhar o objeto na tela com base nas coordenadas x e y. Nesse caso é desenhado um círculo usando a função arc, mas outras formas poderiam ser usadas.

Listagem 3: Função Desenhar

function Desenhar() {
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI*2, true);
    ctx.fill();
}

A próxima função chama-se LimparTela e é responsável por desenhar um retângulo uniforme sobre toda área “desenhável”. Ela deve ser chamada antes da função Desenhar, para limpar a área retangular antes que o círculo seja redesenhado.

Listagem 4: Função LimparTela

function LimparTela() {
    ctx.fillStyle = "white";
    ctx.strokeStyle = "black";
    ctx.beginPath();
    ctx.rect(0, 0, WIDTH, HEIGHT);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}

As propriedades fillStyle e strokeStyle representam as cores do plano de fundo e da borda, respectivamente, do retângulo a ser desenhado. Finalizando, as funções fill e stroke desenham a forma geométrica e sua borda.

Observamos na função Desenhar que são utilizadas as variáveis x e y previamente declaradas e inicializadas. Mas como desejamos que o objeto possa ser movido conforme o pressionamento das setas do teclado, é preciso adicionar um tratamento para o evento keyDown do documento. Para isso, criaremos uma função chamada KeyDown que verificará a tecla pressionada e alterará as variáveis x e y, somando ou subtraindo os valores das variações dx e dy, respectivamente.

Listagem 4: Função KeyDown

function KeyDown(evt){
    switch (evt.keyCode) {
        case 38:  /*seta para cima */
            if (y - dy > 0){
                y -= dy;
            }
            break;
        case 40:  /*set para baixo*/
            if (y + dy < HEIGHT){
                y += dy;
            }
            break;
        case 37:  /*set para esquerda*/
            if (x - dx > 0){
                x -= dx;
            }
            break;
        case 39:  /*seta para direita*/
            if (x + dx < WIDTH){
                x += dx;
            }
            break;
    }
}

De fato a função foi definida mas ainda não está diretamente relacionada ao evento keyDown do documento. Isso será feito mais adiante, após a definição de todas as funções a serem utilizadas.

A próxima função apresentada se chama Atualizar e é responsável por chamar as funções LimparTela e Desenhar, nessa ordem.

Listagem 5: Função Atualizar

function Atualizar() {
    LimparTela();    
    Desenhar();
}

A seguir temos a função responsável por inicializar os objetos canvas, ctx e por definir a chamada à função Atualizar periodicamente. Para isso é utilizada a função setInterval que recebe dois parâmetros: a função a ser executada e o intervalo em milissegundos.

Listagem 6: Função Iniciar

function Iniciar() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    return setInterval(Atualizar, 10);
}

Agora que todas as funções estão definidas, é preciso chama-las para dar início ao processo. Isso é feito no final do código, fora de qualquer função, com as seguintes instruções.

Listagem 7: Iniciando o processo de desenho

window.addEventListener('keydown',KeyDown,true);
Iniciar();

Testando o código do Canvas

Estando prontos os arquivos HTML e Javascript, podemos salvá-los e abrir o HTML no browser. Com isso, o resultado será semelhante ao mostrado na figura a seguir.

Testando o código

Figura 1: Testando o código

Pressionando as setas do teclado, é possível movimentar a “bolinha” dentro da área retangular definida. Esses limites são estabelecidos na função KeyDown.

Com isso finalizamos esse artigo. Espero que tenham gostado e até a próxima.

Clique aqui para obter o código fonte desenvolvido.
Joel Rodrigues

Joel Rodrigues - Técnico em Informática - IFRN Cursando Bacharelado em Ciências e Tecnologia - UFRN Programador .NET/C# e Delphi há quase 3 anos, já tendo trabalhado com Webservices, WPF, Windows Phone 7 e ASP.NET, possui ainda conhecimentos em HTML, CSS e Javascript (JQuery).