By Luis Araujo (2018)
Este livro tem com objetivo apresentar as principais aplicações do Canvas HTML5, desde os conceitos básicos até aplicações mais complexas como a criação de jogos. Este material nasce da necessidade de sintetizar informações sobre o Canvas e e compartilhar minha experiência na criação de diversas aplicações multimídia. Costumo dizer que dá para fazer o mundo com o canvas e espero que, ao término do livro, você também chegue a esta conclusão também.
-
Este este livro, assim como seu material adicional, são disponibilizados aqui como rascunho para livre leitura, não podendo ser impressos ou comercializados.
-
O livro está em desenvolvimento, assim qualquer dúvida ou sugestão pode ser enviada para luisaraujo.ifba@gmail.com ou, se tem familiaridade com o github, abra um Issues.
-
Contribuições são bem vindas, todos os colaboradores serão mencionados na versão final, sem atribuição de autoria.
1.1 - Aplicações Multimídias na Web
1.2 - A chegada do Canvas
1.3 - Plano Cartesiano do Canvas
1.4 - Aspectos estruturais do Canvas
1.5 - Resumo do Capítulo
1 - Introdução
1.1 - Adicionando o elemento Canvas na sua página
1.2 - Javascript e Canvas
1.3 - Capturando o elemento do DOM
1.4 - Testando Suporte do Browser
1.5 - Recuperando o Context2d
1.6 - Encapsulando
2 - Trabalhando com Textos
2.1 - Adicionando Texto no Canvas
2.2 - Posicionando Texto
2.3 - Cor Texto no Canvas
2.4 - Modificando o Alfa do Texto
2.5 - fillText e stronkText
2.6 - Tamanho, fonte, peso e estilos básicos
2.7 - Adicionando Sobra
2.8 - Usando gradientes
2.9 - Usando imagem como textura
Projeto 01: Criar seletor de estilo para Texto
3 - Desenhando [Em desenvolvimento]
3.1 - Desenhando Figuras no Canvas
3.2 - Adicionando estilos às Figuras
3.3 - Desenhando com o Mouse no Canvas
3.4 - Limpar o Canvas
Projeto 02: Criar uma aplicação similar ao Paint
1- Imagem
1.1 - Adicionando uma imagem do DOM
1.2 - Carregando uma Imagem para o Canvas (usando preload)
1.3 - Redimensionar a Imagem no Canvas
1.4 - Usando parte da imagem no Canvas (sprite sheet)
2- Usando Transformações em Imagem
3- Manipulando Pixel
4- Criando Efeito
5 - Comprimindo Uma Image
Projeto 03: Criar um editor de efeitos para imagens
1 - Animando Textos [Em desenvolvimento]
1.1 - Animação com posição
1.2 - Animação com alfa
1.3 - Animação com textura
Projeto 04: Criar uma animação em texto
2 - Animando Imagens [Em desenvolvimento]
2.1 - Animação com posição fixas
2.2 - Movendo através de uma reta
2.3 - Movendo através de dois pontos
2.4 - Movendo através de um vetor
2.5 - Criando uma animação com bola
2.6 - Movendo através de um círculo
2.7 - Movendo através de uma espiral
2.8 - Animação com alfa
2.9 - Animação com alfa
2.10 - Animação com imagens
2.11 - Criando animação baseada em coluna
2.12 - Animação com rotação
2.13 - Timer Loop
Projeto 04: Criar uma animação
1 - Introdução
Exibindo video em canvas
Criando preload
Usando imagem da Camera
2 - Efeitos
Aplicando Efeito em Canvas
Aplicando Chromakey
3 - Interação entre input e canvas
3.1 - Usando o Teclado
3.2 - Adicionando funções de play, pause, repeat
Projeto 05: Criando um player
1 - Gráficos de Pontos
1.1 - Criando os Eixos
1.2 - Criando os pontos
1.3 - Obtendo dados externos
2 - Gráficos de Linha
2.2 - Criando as linhas
2.3 - Obtendo dados externos
2.3 - Mesclando pontos e linhas
3 - Gráficos de Barra
3.2 - Criando as Barras e Legendas
3.3 - Obtendo dados externos
4 - Gráficos de Pizza
4.1 - Criando o Gráfico
4.2 - Adicionado Legendas no Gráfico
4.3 - Obtendo dados externos
1 - Colisões
1.1 - Detectando Colisões com Box Sprite
1.2 - Detectando Colisões à nível de Pixel
2 - Usando Tiles
2.1 - Criando um Grid de Tile 3.1 - Criando um Tile Map 4.1 - Exibindo o Tile Map
3 - Usando GUI
5 - Usando Física
5.1 - Gravidade Simples
5.2 - Aplicando Elasticidade
5.2 - Aplicando Fricção
5.3 - Aplicando Easing
5.4 - Introdução ao Box2DWeb
Projeto 05: Criar um jogo