Como desenhar e animar gráficos com lona html5

Uma das novas e excitantes partes do HTML5 é a tela de pintura

elemento. utilização tela de pintura, 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 tela de pintura trabalhos?

o tela de pintura elemento cria um contêiner, ou lona, ​​sobre o qual você pode desenhar gráficos. Um exemplo simples de um tela de pintura elemento que cria uma área de desenho quadrado 300 pixels parece com isso:

Assim que tiver o tela de pintura, você deve escrever um script, usando javascript, para colocar as coisas dentro da área de desenho. Imagens desenhadas dentro de um tela de pintura elemento são muito diferentes das imagens estáticas que são tradicionalmente usados ​​em páginas da 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. tela de pintura funciona muito bem para a elaboração de 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 usado de dentro de um documento HTML:

função sorteio () {var lona = 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 podem ser controlados com a entrada do usuário, tela de pintura gráficos são ideal para jogos. Alguns dos jogos mais populares criados com tela de pintura 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 direção a você. Conforme você digita as letras em cada palavra, eles são abatidos fora do céu.

tela de pintura também é bom para a criação de gráficos e tabelas que são atualizados em tempo real usando dados em tempo real, ou para permitir que seus usuários para manipular gráficos através da web.

O potencial utiliza para HTML5 tela de pintura são limitadas apenas pela sua imaginação e por suas habilidades de programação, é claro.

Em agosto de 2013, a tela de pintura elemento é apoiada 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 tela de pintura-gráficos baseados.