CANVAS HTML 5 – Composição gráfica e interatividade na web

Introdução

1. CANVAS

    1.1. Primeiros passos

    1.2. O elemento de marcação

    1.3. Criando um arquivo com padrão HTML5

    1.4. O objeto CANVAS

       1.4.1. Elemento inserido no documento HTML

       1.4.2. O atributo id para o elemento

    1.5. Suporte aos navegadores

       1.5.1. Exemplo

    1.6. Contexto 2D

       1.6.1. getContext()

       1.6.2. Vinculando um arquivo JavaScript ao documento HTML

       1.6.3. CanvasRenderingContext2D

2. CANVAS e JavaScript

    2.1. Boas práticas

       2.1.1. Não faça omissão das chaves

       2.1.2. Coloque as chamadas de script no encerramento da tag

       2.1.3. Utilize arrays

       2.1.4. Reduza a quantidade de variáveis globais

       2.1.5. Comente seu código

    2.2. Funções parametrizadas

       2.2.1. Exemplo de função utilizando dois parâmetros

    2.3. Bibliotecas JavaScript

       2.3.1. Paper

       2.3.2. Processing

       2.3.3. jCanvaScript

       2.3.4. oCanvas

       2.3.5. Raphael

    2.4. Ferramentas e recursos online

       2.4.1. Online Sprite Box Tool

       2.4.2. Online Font Testing Tool

       2.4.3. Online Pattern Generator Tool

       2.4.4. Online XRay Tool

3. Desenhando sobre o CANVAS

    3.1. Contexto 2D

       3.1.1. Verificando o suporte ao contexto do CANVAS via script

    3.2. Formas geométricas

       3.2.1. Criar formas retangulares

       3.2.2. Limpar formas retangulares

       3.2.3. Criar contornos retangulares

4. Preenchimentos sólidos e gradientes

    4.1. Opções para atribuição de cor

    4.2. Atribuindo um estilo de cor sólida

       4.2.1. Atribuindo um estilo de cor para um contorno

    4.3. Global Alpha

    4.4. Atribuindo cores gradientes

       4.4.1. Radial gradiente

       4.4.2. Linear gradiente

    4.5. Um exemplo com retângulos sorteando posições e cores

    4.6. Linhas e curvas

       4.6.1. Linha de grade

       4.6.2. Contornos

       4.6.3. Desenhando linhas

    4.7. Arcos e círculos

       4.7.1. Círculo básico

       4.7.2. Círculo básico com preenchimento

       4.7.3. Combinando círculos

       4.7.4. Semicírculos

    4.8. Formas em curvas Bézier

       4.8.1. Curvas quadráticas

       4.8.2. Curvas cúbicas

    4.9. Desenhando linhas da grade

5. Adicionando texto ao CANVAS

    5.1. Texto básico

    5.2. Contorno de texto

    5.3. Contornos e preenchimentos simultaneamente

    5.4. Aplicando sombra ao texto

    5.5. Alinhamento do texto

       5.5.1. Alinhamento ao centro

       5.5.2. Alinhamento à direita

    5.6. Medindo a largura do texto

    5.7. Usando imagens como textura para o texto

    5.8. Método toDataURL()

6. Exibindo e manipulando imagens

    6.1. Usando imagens externas

    6.2. Controlando a escala de proporção das imagens

    6.3. Enquadrando imagens em papel de parede

    6.4. Imagens e textos simultaneamente

    6.5. Recorte de imagens

    6.6. Exibindo imagens com Data URL e Ajax

7. Composição

    7.1. Modos de composição

    7.2. Salvando e restaurando o status do contexto

    7.3. Criando um clipe

       7.3.1. Comandos save() e restore()

8. Matrizes de transformação

    8.1. Os métodos setTransform() e transform()

    8.2. Translação e rotação

        8.2.1. Translação

       8.2.2. Rotação

    8.3. Escala

9. Vídeo em CANVAS

    9.1. Adicionando vídeo ao CANVAS

    9.2. Enquadrando módulos em um único vídeo

    9.3. Exibindo vídeos em áreas de recorte

    9.4. Criando amostras de vídeo (screenshots)

10. Animação

    10.1. Usando imagens em movimento

    10.2. Usando formas em movimento

    10.3. Criando gráficos estatísticos

11. Adicionando interatividade

    11.1. Capturando coordenadas de tela

    11.2. Controles de mouse (arrastar e soltar)

    11.3. Controlando animação com cliques

    11.4. Detectando colisões – Um jogo básico em CANVAS

Considerações finais: otimizando o canvas