Como desenhar e animar gráficos com HTML5 canvas
Uma das novas e excitantes partes do HTML5 é a lona
elemento. utilização lona, você pode desenhar gráficos de bitmap dentro da janela do browser. O que é ainda mais impressionante e útil é que você pode escrever um programa que irá desenhar gráficos em tempo real dentro da janela do browser.como funciona lona trabalho?
o lona elemento cria um recipiente, ou lona, sobre o qual você pode desenhar gráficos. Um exemplo simples de um lona elemento que cria uma área de desenho quadrado 300-pixel parece com isso:
Assim que tiver o lona, você deve escrever um script, usando javascript, para colocar as coisas dentro da área de desenho. Imagens desenhadas dentro de um lona elemento são muito diferentes das imagens estáticas que são tradicionalmente utilizadas em páginas web, onde você deve criar e carregar os gráficos para o servidor antes de o navegador carrega-los em páginas da web usando o img tag.
Imagens carregado com o img tag não pode ser alterado depois que são exibidos no navegador. Os desenvolvedores da Web têm alguma capacidade de se mover ou redimensionar as imagens, mas se é uma imagem de seu gato, por exemplo, não há nenhuma maneira de transformá-lo em um quadro de sua bicicleta.
Com gráficos, a situação é muito diferente. Como o script está fazendo o desenho após o carregamento da página web, o gráfico pode ser qualquer coisa, e ele pode ser desenhado muito rápido. lona funciona extremamente bem para desenhar tabelas e gráficos, mas também pode ser usado para manipular fotografias em tempo real, ou mesmo para criar animação ou trabalhar com arquivos de vídeo.
Aqui está um exemplo simples de uma função javascript que irá desenhar um retângulo sólido quando usada de dentro de um documento HTML:
função draw () {var canvas = document.getElementById ( "tela") - se (canvas.getContext) {var ctx = canvas.getContext ( '2D') - ctx.fillRect (25,25,100,100) -}}O que é bom para a tela?
Devido à sua capacidade para manipular gráficos muito rapidamente usando programas que pode ser controlada com a entrada de utilizador, lona gráficos são ideal para jogos. Alguns dos jogos mais populares criados com lona incluir
Sinuoso é um simples, mas viciante, jogo onde você controla um ponteiro que você se mover para evitar pontos vermelhos e atingiu bons pontos.
canvas Rider é um belo jogo de deslocamento 2D onde você controla um boneco em uma bicicleta, andar ao longo de centenas de faixas de contribuições dos usuários.
ZTYPE é um jogo onde você deve digitar palavras como eles estão caindo em sua direção. Conforme você digita as letras de cada palavra, eles são abatidos fora do céu.
lona também é bom para a criação de gráficos e tabelas que são atualizados em tempo real, utilizando dados em tempo real, ou para permitir que seus usuários para manipular gráficos através da web.
A usos potenciais para HTML5 lona são limitadas apenas pela sua imaginação e por suas habilidades de programação, é claro.
A partir de agosto de 2013, a lona elemento é suportado pela maioria dos navegadores modernos, incluindo IE9 (e versões superiores), Firefox, Chrome, Opera e Safari. Esteja ciente, no entanto, que os usuários que executam mais velhos ou menos comuns navegadores web provavelmente será incapaz de ver ou interagir com lona-gráficos baseados.