Manual de Canvas do HTML 5

Manual do elemento Canvas do HTML 5 no qual aprenderemos a desenhar sobre as telas, utilizando Javascript e o API de Canvas.
Capítulos do manual
1.- O que é HTML 5
Veremos o que é HTML 5, sua previsão de tempo para se converter em uma especificação recomendada e as novidades mais significativas que proporcionará.

2.- Introdução a Canvas do HTML 5
Canvas é um dos componentes mais inovadores de padrão HTML 5 que serve para desenhar dinamicamente imagens em uma página web.

3.- Exemplo de desenho com o API de canvas
Um primeiro exemplo de desenho em um elemento canvas de HTML 5 com o API de canvas e Javascript.

4.- Entender a tela de canvas
Veremos como é a tela de um canvas, formada por um eixo de coordenadas que podemos utilizar para posicionar todos os desenhos que quisermos colocar no canvas.

5.- Desenhar retângulos em um Canvas
Como desenhar quadrados e retângulos em um elemento Canvas de HTML mediante a função fillRect() e strokeRect() de Javascript, válida em HTML 5.

6.- Caminhos em Canvas do HTML 5
Vejamos como realizar desenhos em um canvas com as funções para caminhos, que permitem a criação de estruturas mais complexas.

7.- Exemplo 2 de desenho de caminhos em canvas
Segundo exemplo sobre os caminhos no elemento canvas, onde veremos as funções closePath() e stroke().

8.- Caminhos em canvas: exemplo 3
Como desenhar um caminho em canvas de HTML 5 com diversas variantes, fechado e sem fechar, e com ou sem preenchimento de cor.

9.- Outros exemplos de desenho de caminhos em elementos Canvas
Neste artigo veremos outros testes de desenho de caminhos em canvas.

10.- Curvas em caminhos de Canvas do HTML 5
Os caminhos nos elementos canvas do HTML 5 podem ter curvas, que conseguimos por meio dos arcos, das curvas quadráticas e das curvas bezier.

11.- Desenho de curvas com arcos em canvas
Como desenhar arcos, para fazer curvas baseadas em circunferências ou segmentos delas, na tela dos elementos Canvas do HTML 5.

12.- Curvas quadráticas no canvas
As curvas quadráticas são um tipo especial de curva que se definem por três pontos, dois para o início e fim da curva e outro para sua tendência.

13.- Curvas Bezier em Canvas
As curvas Bezier são a maneira mais complexa de especificar desenhar caminhos curvos no elemento canvas de HTML 5.

14.- FlashCanvas: elemento canvas compatível com todos os navegadores
FlashCanvas é uma biblioteca Javascript para conseguir que o elemento canvas do HTML 5 funcione em navegadores que não o suportam, como Internet Explorer 6 al 8.

15.- Usar imagens no Canvas
Desenhar o conteúdo de imagens nos elementos canvas do HTML 5, usando qualquer tipo de arquivo gráfico permitido (gif, jpg, png) para incluir uma imagem na tela de um canvas.

16.- Maneiras de acessar objetos Image para mostrar no canvas
Outro exemplo de desenho com o API de canvas del HTML 5, no que incluímos imagens trazidas por diferentes vias possíveis com Javascript.

17.- Escala e recorte em imagens em canvas
Escala e recorte de imagens no elemento canvas. Como mudar o tamanho e recortar as imagens ao desenhá-las na tela de canvas do HTML 5.

18.- Mosaico de imagens em Canvas
Como realizar um padrão de repetição ou mosaico de imagens no elemento Canvas do HTML5, o que se conhece em inglês como Pattern.

19.- Espessura da linha em Canvas
Como alterar a espessura da linha quando desenhamos o contorno de um caminho ou de um retângulo em um elemento Canvas do HTML 5.

20.- Extremidades das linhas em canvas
Nas linhas desenhadas nos elementos canvas do HTML 5 podem ser configurados distintos tipos de extremidades, quadrados, arredondados etc.

21.- Uniões entre segmentos de linhas em canvas com lineJoin
Quando uma linha consta de vários segmentos, as junções ou uniões entre os distintos segmentos podem ser configurados de diferentes maneiras com a propriedade lineJoin.

22.- Limite da ponta do ângulo com miterLimit em canvas
Quando configuramos o valor miter para o parâmetro lineJoin, podemos configurar um limite de tamanho para a ponta que formará o ângulo dos segmentos da linha com miterLimit.

23.- Introdução a Processing.js
Processing.js é um framework Javascript para desenho e animação mediante o elemento Canvas do HTML5.

24.- FlashCanvas: elemento canvas compatível com todos os navegadores
FlashCanvas é uma biblioteca Javascript para fazer com que o elemento canvas do HTML 5 funcione em navegadores que não o suportam, como Internet Explorer 6 a 8.

25.- Animações no Canvas com EaselJS
Por nossas pupilas passam grandes quantidades de conteúdos web. Só paramos a vista ante um titular interessante. Os titulares de nossa página são o ponto onde o visitante decide continuar ou não.

26.- Como escolher Canvas ou SVG para seus Websites
Aqui vou compartilhar com vocês algumas reflexões que podem ajudar à hora de escolher entre Canvas e SVG, ou uma mistura de ambos.

27.- Guia do Canvas HTML5 para desenvolvedores
O elemento canvas de HTML5 é a funcionalidade mais interessante que os desenvolvedores vão querer utilizar para criar aplicações realmente avançadas para a Web sem necessidade de instalar complementos no navegador.


Downloads
Archivo de descarga 177.52 KB Manual de Canvas do HTML 5. Manual do elemento Canvas do HTML 5 no qual aprenderemos a desenhar sobre as telas, utilizando Javascript e o API de Canvas.

Comentarios
Envie seus comentários ou opiniões sobre este manual.
Comentar o manual

Comentários do manual
Foi enviado 1 comentário à manual
1 comentário não revisado
0 comentários revisados

Usuários :    login / registro

Neste manual
Baixar manual

Categorias relacionadas:

Manuais relacionados