Como criar uma animação com a tag html5 canvas

Embora o HTML5 tela de pintura

tag pode não substituir o Flash como um mecanismo para a implementação de jogos e animações no navegador, é razoavelmente fácil de adicionar animação a um tela de pintura imagem. A chave é usar os recursos de animação já incorporadas ao browser.

Estrutura básica do loop de animação em HTML5 canvas

Uma animação geralmente requer uma organização especial chamado loop de animação. A estrutura básica do loop de animação funciona da mesma em qualquer língua:

1. Inicialização.

   Video: Imperdível!!! - Criando animação com css

   Criar os ativos, incluindo o fundo e qualquer um dos objetos que você estará usando. Objetos que serão manipulados em tempo real são normalmente chamados sprites. Geralmente, isso é feito quando o programa executado pela primeira vez, para economizar tempo durante a execução principal. Você também pode definir constantes para o tamanho da imagem, tamanho da tela, taxa de quadros e outros valores que não vai mudar durante a execução do jogo.

2. Determinar uma taxa de quadros.

   Animações e jogos funcionam chamando uma função repetidamente a uma taxa prescrita. Em javascript, você normalmente usa o setInterval () função para especificar uma função repetida. o taxa de quadros indica quantas vezes a função especificada será chamado. Jogos e animações normalmente executado a taxas de quadro entre 10 e 30 quadros por segundo. A taxa de quadros mais rápido é mais suave, mas pode não ser sustentável com algum hardware.

3. Avaliar o estado atual.

   Cada Sprite é realmente um elemento de dados. Durante cada quadro, determinar se alguma coisa importante aconteceu: Será que o usuário pressionar uma tecla? É um elemento deveria mudar? Será que um sprite deixar a tela? Será que dois sprites conk para o outro?

4. Modificar dados Sprite.

   Cada entidade gráfica tem geralmente posição ou dados de rotação que pode ser modificada durante cada quadro. Geralmente isso é feito através de transformações (translação, rotação e escala), embora às vezes você pode alternar entre as imagens em seu lugar.

5. Limpar o fundo.

   Uma animação é realmente uma série de imagens desenhadas rapidamente no mesmo lugar. Normalmente, você precisa limpar o fundo no início de cada quadro para limpar imagem do último quadro.

6. Redesenhar todos os sprites.

   Cada Sprite é redesenhada usando seus novos dados. Os sprites parecem mover-se, porque eles são atraídos em um novo local ou orientação.

Criando as constantes de um recurso de animação em HTML5 canvas

Construindo um programa que gira uma imagem dentro de uma tela exige vários lotes de código. O primeiro trabalho é para configurar as várias variáveis ​​e constantes que descrevem o problema. O código a seguir é criada fora qualquer função porque descreve os valores que serão compartilhados entre as funções:

 var-var desenho ângulo con-var goofyPic-var = 0-CANV_HEIGHT = 200 = 200 CANV_WIDTH-SPR_HEIGHT = 50 = 40--SPR_WIDTH

o desenhando variáveis ​​referem-se a tela de pintura elemento. o vigarista variável será o contexto de desenho, goofyPic é a imagem a ser rodada, e ângulo será usado para determinar o quanto a imagem está rodado. Os outros valores são constantes usadas para descrever a altura e largura da tela, bem como o sprite.

Video: HTML5 Canvas Tutorial

Implantando a animação em HTML5 canvas

Use o onload corpo mecanismo para iniciar algum código assim que a página carregar completamente. No entanto, a página agora tem duas funções. o nisso() função manipula a inicialização, eo desenhar() função será chamada várias vezes para lidar com a animação real. Aqui está o código no nisso() função:

 função init () {desenho = document.getElementById ("desenhando") -CON = drawing.getContext ("2d") -goofyPic = document.getElementById ("goofyPic") -setInterval (sorteio, 100) -} // Init extremidade

O trabalho do nisso() função é inicializar as coisas. Neste exemplo particular, os vários elementos (a lona, ​​o contexto, e a imagem) são carregados para as variáveis ​​javascript, e a animação é definido acima. o setInterval () função é usada para configurar o laço principal da animação. Ele tem dois parâmetros:

• Uma função repetível: O primeiro parâmetro é o nome de uma função que será chamada repetidamente. Neste caso, o desenhar função será chamada muitas vezes.

• Um valor de atraso: O segundo parâmetro indica quantas vezes a função deve ser chamado em milissegundos (1/1000 de um segundo). Um atraso de 100 vai criar uma taxa de frames de 10 frames por segundo. Um atraso de 50 irá causar uma taxa de quadros de 20 quadros por segundo, e assim por diante.

Dando animação ao quadro atual em HTML5 canvas

o desenhar() função será chamado muitas vezes em sucessão. Em geral, sua tarefa é limpar o quadro, calcular novos estados Sprite, e redesenhar o sprite. Aqui está o código:

 tração função () {// backgroundcon.fillStyle clara = "branco"-con.fillRect (0, 0, CANV_HEIGHT, CANV_WIDTH) - // desenha bordercon.strokeStyle = "vermelho"-con.lineWidth = "5"-con.strokeRect (0, 0, CANV_WIDTH, CANV_HEIGHT) - // alterar o angleangle rotação + = .25-se (ângulo gt; Math.PI * 2) {ângulo 0 = -} // iniciar um novo systemcon.save transformação () - con.translate (100, 100) -con.rotate (ângulo) - // desenhar o imagecon.drawImage (goofyPic, SPR_WIDTH / -2, SPR_HEIGHT / -2, SPR_WIDTH, SPR_HEIGHT) -con.restore () -} // tração final

Enquanto o código pode parecer um pouco envolvido, ele realmente não faz nada de novo:

1. Limpar o fundo.

   Lembre-se que a animação é repetido desenho. Se você não limpar a fundo no início de cada quadro, você verá os desenhos quadro anterior. Usar o contexto do clearRect () função para desenhar um fundo fresco, ou uma das outras ferramentas de desenho para usar uma imagem de fundo mais complexo.

2. Desenhe qualquer conteúdo nonsprite.

   Por exemplo, você pode usar strokeStyle, espessura da linha, e strokeRect () para construir um quadro retangular vermelha ao redor da tela. Note-se que o CANV_HEIGHT e constantes CANV_WIDTH referem-se ao tamanho atual da lona.

3. Modificar o estado do sprite.

   Para modificar o ângulo de rotação da imagem, no exemplo, a variável chamada ângulo foi criado fora da função. (É importante que ângulo foi criado fora do contexto da função para que ele possa manter o seu valor entre chamadas para a função.) Você pode então adicionar uma pequena quantidade de ângulo cada frame.

   Sempre que você alterar uma variável (especialmente em um loop virtualmente infinitas como uma animação), você deve verificar se há condições de contorno. O maior valor admissível ângulo (em radianos) é duas vezes pi. Se o ângulo se torna maior do que isso, ele redefine a zero.

4. Construir uma transformação. Configurar uma nova transformação com o Salve () método, e usar o rodar () e traduzir() funções para transformar um sistema de coordenadas temporária.

   Video: Tutorial iniciando com canvas html5

   Muitas animações são realmente modificações de uma transformação. A imagem não está mudando, apenas a transformação que contém a imagem.

5. Desenhar a imagem no centro da nova transformação.

   Video: Canvas básico - Animação para games com javascript

   o drawImage () comando desenha a imagem baseado no canto superior esquerdo da imagem. Se você desenhar a imagem em (0, 0) da nova transformação, a imagem aparecerá para girar em torno de seu canto superior esquerdo. Geralmente, você vai querer uma imagem para rodar em torno do seu ponto central. Simplesmente desenhar a imagem para seu centro está na origem. Conjunto X a zero menos metade da largura da imagem, e Y a zero menos metade da altura da imagem.

6. Feche a transformação. Use o restaurar() método para terminar de definir o sistema de coordenadas temporária.