Pense em gráficos de uma nova maneira
O HTML5 fornece três tecnologias principais para a implementação de elementos gráficos: SVG (elementos gráficos vetoriais escaláveis), o elemento Canvas e CSS (folhas de estilo em cascata). Esta seção descreve essas tecnologias no contexto geral de elementos gráficos e na relação de elementos gráficos com o desenvolvimento de jogos.
Nesta seção
| Tópico | Descrição |
|---|---|
Inicialmente, este tópico fornece uma comparação entre SVG e o Contexto 2D do HTML Canvas, abordando em seguida diversos exemplos de código comparativos, como rastreamento de raio e triagem de verde. |
|
Este tópico aborda as transformações de coordenada SVG associadas ao método |
|
Este tópico aborda a animação SVG básica e é um pré-requisito para Animação SVG intermediária. Parte-se do pressuposto de que há um conhecimento básico de HTML e JavaScript. Para entender completamente os materiais apresentados neste tópico, reserve cerca de uma hora de estudo. |
|
Este tópico introduz técnicas de animação SVG de nível intermediário e começa a partir de onde Animação SVG básica parou. Para entender completamente os conceitos apresentados neste tópico, reserve cerca de uma hora de estudo. |
|
Este tópico trata de conceitos mais avançados da criação de animação SVG para seu site. Antes de estudar este tutorial, é necessário familiarizar-se com Animação SVG básica, Animação SVG intermediária e ter um conhecimento sólido de HTML e JavaScript. |
|
Este tópico aborda uma técnica para manipular um objeto tridimensional usando o elemento Canvas do HTML5. |
Introdução
Além do suporte para formatos de imagem tradicionais (GIF, PNG, JPG, etc.), os navegadores modernos habilitam elementos gráficos estáticos e dinâmicos basicamente através destas três principais tecnologias:
- SVG fornece uma linguagem de marcação avançada para elementos gráficos, filtros e animação vetoriais (diferentemente daqueles estruturados em bitmap). Para obter uma excelente visão geral, veja SVG (elementos gráficos vetoriais escaláveis) e SVG.
- O elemento Canvas fornece scripts com uma tela de bitmap dependente de resolução que pode ser usada para renderizar gráficos, elementos gráficos de jogos ou outras imagens visuais de maneira imediata. Para obter uma ótima visão geral, veja Elemento Canvas do HTML5.
- A iteração mais recente do CSS fornece diversos aprimoramentos voltados para elementos gráficos, incluindo gradientes, transformações bidimensionais e tridimensionais, animações e transições. Para obter uma excelente visão geral, veja Folhas de estilo em cascata, Nível 3 (CSS3) e CSS.
Inspire-se
Os exemplos a seguir mostram o que é possível criar com SVG, Canvas e CSS3.
| Link | Descrição |
|---|---|
| Aceleração de partícula | Além dos objetos bidimensionais tradicionais, Canvas pode ser usado para animar objetos tridimensionais, conforme mostra este exemplo eficiente. Agora que você já conhece as possibilidades, veja Canvas 3D para saber como pôr em prática. |
| O maior Pacman do mundo | Um gigantesco universo de labirintos interconectados do PAC-MAN® criado em Canvas do HTML5. |
| Disney Tron: Legacy | Um gibi digital ganha vida com SVG e brilha com a aceleração de hardware do IE. |
| Cartões postais do Flickr | Apresenta algumas das ações que podem ser executadas com os recursos do módulo CSS3 2D Transforms junto com o Flickr. |
Demonstrações
Quer mais inspiração? Então experimente os exemplos a seguir:
| Link | Descrição |
|---|---|
| Transições e animações CSS3 | As transições CSS permitem facilmente animar de um estado original para um novo estado com o passar do tempo. As animações CSS fornecem controle adicional através do uso de uma função de tempo e quadros chave. Este exemplo requer o Internet Explorer 10 ou versão mais recente. Ele também poderá funcionar com outros navegadores modernos compatíveis com HTML5. |
| Transformações CSS3 2D e 3D | Estas demonstrações práticas mostram como funcionam as transformações CSS3. Este exemplo requer o Internet Explorer 10 ou versão mais recente. Ele também poderá funcionar com outros navegadores modernos compatíveis com HTML5. |
| Gradientes CSS3 | O que exatamente é um gradiente? Neste caso, uma imagem vale por mil palavras, e esta demonstração prática prova isso. |
| Demonstração de Canvas do IE Beatz | Este exemplo requer o Windows Internet Explorer 9 ou versão mais recente. Ele também poderá funcionar com outros navegadores modernos compatíveis com HTML5. |
| Demonstração de Canvas do Mr. Potato Gun | Este exemplo requer o Internet Explorer 9 ou versão mais recente. Ele também poderá funcionar com outros navegadores modernos compatíveis com HTML5. |
| Canvas Pad: aprenda e brinque com o Canvas do HTML5! | Atualize o código e pressione a tecla Ctrl+Enter para atualizar a Canvas em tempo real. Este exemplo requer o Internet Explorer 9 ou versão mais recente. Ele também poderá funcionar com outros navegadores modernos compatíveis com HTML5. |
| Exemplo de zoom do Canvas fornecido por Seadragon Ajax | Este exemplo requer o Internet Explorer 9 ou versão mais recente. Ele também poderá funcionar com outros navegadores modernos compatíveis com HTML5. |
| Criador de plano de fundo em gradiente CSS | Este exemplo requer o Internet Explorer 10 ou versão mais recente. Ele também poderá funcionar com outros navegadores modernos compatíveis com HTML5. |
| Exemplo de Canvas SVG–oids | Esta recriação do clássico jogo de fliperama de 1979 mostra o que pode ser feito com um pouco de SVG, JavaScript e conhecimento em programação. Este exemplo requer o Internet Explorer 9 ou versão mais recente. Ele também poderá funcionar com outros navegadores modernos compatíveis com HTML5. |
Aprofundando-se
Pronto para aprender mais? Então confira os links a seguir para começar.
| Link | Descrição |
|---|---|
| Personalizando com as transições e animações CSS3 | Esta postagem do IEBlog fornece informações detalhadas sobre esses novos recursos do CSS. |
| Transformações 3D CSS3 | As Transformações CSS3 adquirem uma nova dimensão com as Transformações 3D. Esta publicação do IEBlog explica as noções básicas. |
| Guia do Canvas para Desenvolvedores | A API do Canvas do HTML5 simplificada em um tutorial de desenvolvimento passo a passo |
| Bastidores de Disney TRON: como criar um site de livro digital com HTML5 | Giorgio Sardo explica o processo do design à implantação e ensina a escolher os padrões Web ideias para seu site. |
| Como criar uma biblioteca visual de imagens com o Canvas do HTML5 | Este tutorial cria um aplicativo que usa as estruturas Canvas, SVG e JavaScript para visualizar imagens e conjuntos de dados grandes. |
| Como escolher entre Canvas e SVG para seu site | Saiba quando escolher Canvas, SVG ou uma combinação de ambos. |
Jogos
Tem interesse no desenvolvimento de jogos? Então confira os recursos a seguir.
| Link | Descrição |
|---|---|
| As 5 principais práticas recomendadas para desenvolver jogos em HTML5 em ação! | Saiba mais sobre as estruturas de desenvolvimento de jogos em HTML5 e como tirar máximo proveito da plataforma do navegador. |
| Como animar sprites em Canvas com EaselJS | Ao desenvolver jogos comuns com o elemento Canvas do HTML5, você precisa de uma maneira para trabalhar com sprites. Saiba como animá-los com o plug-in de jogos EaselJS. |
| Como desenvolver um jogo BrikBloc com SVG e Canvas do HTML5 | David Cathue, especialista em jogos em HTML5, mostra como usar as plataformas Canvas, SVG e JS para facilitar a criação de código de jogos. |
| Como criar asteroides com o mecanismo de jogo Impact do HTML5 | Saiba como criar um jogo simples de asteroides no espaço usando o mecanismo de jogo Impact, um dos mais potentes mecanismos disponíveis atualmente. |