|
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. |
 |
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. |
