luisaraujo / livro-canvas-html5-do-alpha-ao-z-index

Livro Canvas HTML5: do Alpah ao Z-Index

Canvas HTML5: do Alpha ao Z-Index

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 [email protected] 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.

Capítulo I - Introdução

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

Capítulo II - Textos e Figuras

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

Capítulo III - Editando Imagens [Em desenvolvimento]

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

Capítulo IV - Animaçao [Em desenvolvimento]

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

Módulo V- Video e Canvas [Em desenvolvimento]

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

Capítulo VI - Criando Visualizadores [Em desenvolvimento]

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

Capítulo VII - Criando Jogos [Em desenvolvimento]

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

livro-canvas-html5-do-alpha-ao-z-index's Issues

Preciso de uma revisão do capítulo 2

Preciso de uma revisão (ortografia e código) do capítulo 2

Preciso de uma revisão do capítulo 1

Preciso de uma revisão (ortografia e código) do capítulo 1