Análise de Sistemas
Banco de Dados
Computação Gráfica
Diversos
Internet
Lógica
Programação
Redes
Computação
Informática Básica
FrameWorks
Matemática
Cadastre-se
CURSO COMPGRAF03 - INTERNET COM HTML5 E CANVAS


CLUBE DE AUTORES


CLUBE DE AUTORES


CLUBE DE AUTORES


AMAZON


MAGAZINE LUIZA

PHP-GENERATOR

CURSO COMPGRAF03 - INTERNET COM HTML5 E CANVAS

Eu tive muitas coisas que guardei em minhas mãos, e as perdi. Mas tudo o que eu guardei nas mãos de Deus, eu ainda possuo. (Martin Luther King)

RMFAIS - CANVAS

COMPUTAÇÃO GRÁFICA PARA INTERNET

Além da inserção de imagens em uma páginas HTML, é possível também a criação dessas por meio de programação que misturam funções e coordenadas matemáticas em um eixo cartesiano. No HTML5 foi introduzida a tag CANVAS, possibilitando criar, em uma página HTML, uma área para renderização de formas geométricas e efeitos gráficos. Este pequeno texto é apenas uma introdução a programação com canvas no que se refere a criação das formas geométricas. Os parâmetros que delimitam as figuras e os seus respectivos tamanhos são informados em uma função JAVASCRIPT e relacionados a uma área delimitada por canvas por meio da cláusula ID="nome do elemento especificado na função".

A disposição e localização dos elementos se baseiam em coordenadas cartesianas conforme mostrado na seguinte ilustração:

Observe que, com base nas coordenas x,y, foram criados vetores (segmentos de retas com origem, destino e sentido) que possibilitaram a criação de formas geométricas. Tais vetores podem se exibidos em uma página HTML por meio de programação CANVAS com as funções moveTo(), que marca o ponto de origem, e lineTo(), que marca o ponto de destino. Quando os vetores são segmentados, utiliza-se um ponto de origem e vários pontos de destino, quando não são segmentados pode ser necessário mais de um ponto e origem e destino. Para que as figuras sejam efetivamente mostradas na tela, aplica-se a função stroke();

Os códigos abaixo mostram como criar as figuras exibidas na ilustração.

a) Figura do triangulo:

b) Figura da letra X:

A função stroke() exibe apenas as retas, no caso do triângulo, que é uma figura segmentada, pode-se utilizar a função fill() no lugar de stroke() para preenchê-lo com uma cor previamente informada em fillStyle. Exemplo: fillStyle = 'blue';

Além das funções moveTo() e lineTo(), já exemplificadas, que podem ser utilizadas para criação de qualquer forma geométrica, muitas outras fazem parte do manual CANVAS conforme demonstrado nos exemplos a seguir:

função fillRect(): para criação de quadrados ou retângulos.

função arc(): para criação de arcos, elípses ou círculos.

função fillText(): para exibição de textos.

ATIVIDADES COM CANVAS EM UM DOCUMENTO HTML

1) Monte dois losangos, um sem cor de preenchimento e outro com cor de preenchimento.

2) Crie um quadrado e um retângulo com cor de preenchimento.

3) Faça uma estrela com cinco pontas.

Note que a tag canvas suporta width para especificar a sua largura e height para especificar sua altura, podendo uma borda ser especificada com style="border:1px solid #000000; padding:15;", onde padding impede que as formas geométricas fiquem enconstadas nas bordas do canvas.

Prof. Roni Márcio Fais
www.rmfais.com
Todos os direitos reservados


WebMaster: PROFESSOR RONI MARCIO FAIS
Formação: Bacharel em Ciência da Computação e Especialista em Administração, Supervisão e Orientação Educacional
E-mail: rmfais@yahoo.com.br


Artigos



Criação de APP online