Como criar animação com o Tag HTML5 Canvas

Embora o HTML5 lona

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 lona imagem. A chave é usar os recursos de animação já embutido no navegador.

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 de base do loop de animação funciona da mesma em qualquer linguagem:

1. Inicialização.

   Criar os ativos, incluindo o plano de fundo e qualquer um dos objetos que você irá utilizar. Os objectos que irão ser 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 várias vezes 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 funcionam tipicamente com 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 móvel é 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 um no outro?

4. Modificar dados Sprite.

   Cada entidade gráfica tem geralmente posição de rotação ou dados 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 está redesenhado usando seus novos dados. Os sprites parecem se mover, porque eles são desenhados em uma nova localização ou orientação.

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

Construção de um programa que gira uma imagem dentro de uma lona requer 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 desenho-var ângulo de con-var goofyPic-var = 0-CANV_HEIGHT = 200 CANV_WIDTH = 200 SPR_HEIGHT = 50-SPR_WIDTH = 40-

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

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 na nisso() função:

 função init () {desenho = document.getElementById ( "desenho") - con = drawing.getContext ( "2d") - goofyPic = document.getElementById ( "goofyPic") - setInterval (empate, 100) -} // inicialização final

O trabalho do nisso() função é inicializar as coisas. Neste exemplo particular, vários elementos (a lona, ​​o contexto, e imagem) são carregados em variáveis ​​javascript, ea animação é configurada. o setInterval () função é utilizada para configurar o principal loop de animação. Ele tem dois parâmetros:

• Uma função repetível: O primeiro parâmetro é o nome de uma função que será chamado 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 irá criar uma taxa de quadros de 10 quadros por segundo. Um atraso de 50 fará com que uma velocidade de quadro de 20 quadros por segundo, e assim por diante.

Dando animação para o quadro atual em HTML5 canvas

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

 função draw () {// clara backgroundcon.fillStyle = "white" -con.fillRect (0, 0, CANV_HEIGHT, CANV_WIDTH) - // desenha bordercon.strokeStyle = -con.lineWidth = "5" -con "vermelho". strokeRect (0, 0, CANV_WIDTH, CANV_HEIGHT) - // alterar a rotação angleangle + = .25-se (ângulo> Math.PI * 2) {ângulo 0 = -} // iniciar um novo systemcon.save transformação () - con.translate (100, 100) -con.rotate (ângulo) - // chamar a imagecon.drawImage (goofyPic, SPR_WIDTH / -2, SPR_HEIGHT / -2, SPR_WIDTH, SPR_HEIGHT) -con.restore () -} // sorteio 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 de quadros anteriores. Usar o contexto de 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 as 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 do ângulo admissível (em radianos) é duas vezes pi. Se o ângulo se torna maior do que isso, ele redefine a zero.

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

   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.

   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 será exibida para girar em torno do seu canto superior esquerdo. Normalmente, você vai querer uma imagem para rodar em torno do seu ponto central. Simplesmente desenhar a imagem para o seu centro está na origem. Set X para zero menos metade da largura da imagem, e Y a zero menos metade da altura da imagem.

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