Aula VII - HTML + CSS + Canvas + JavaScript
Autor: Cristina Jung | Publicado: 2016-03-24T21:12:00-03:00


Em primeiro lugar, seção remember de Internet I, logo abaixo, os links para rever alguns conteúdos importantes de Internet I ou Internet II

- Aula I e II de Internet I
- Aula II de Internet II
- Aula III de Internet II
- Aula IV e V de Internet II
- Aula X e XI de Internet II - JavaScript

Aqui, alguns links complementares sobre JavaScript!!

Link 1: JavaScript
Link 2:&nbsp;O que é JavaScript? Controlando o comportamento do HTML e o CSS
Link 3:&nbsp;W3Schools Home - JavaScript Tutorial
Link 4: Artigos de JS
Link 5: JavaScript - CodeAcademy
Link 6: Desenvolvendo em JavaScript


_______________________________________________________________________________

Canvas e Js!

JavaScript é uma linguagem de programação client-side. Usada para controlar o HTML e o CSS e para manipular comportamentos na página.&nbsp;
Que tipo de comportamento?

Qualquer ação que envolva um menu, por exemplo, carregamento de determinado elemento do HTML, uma barra de rolagem, um mouse se movendo, passando sobre algum elemento especifico ou mesmo a execução de um complemento. A obrigação do JavaScript é justamente de fazer aparecer ou executar estas ações.
Neste link, podemos ver como o JavaScript é declarado e como ele é interpretado!

Em aula, iremos trabalhar junto com o elemento &lt;canvas&gt; que servirá de base para os nossos scripts.

Afinal, o que é o canvas?









Primeiro, ele é um elemento muito parecido com a tag&nbsp;&lt;img&gt;. Isso por si só já ajuda no entendimento deste elemento semântico.
O elemento&nbsp;&lt;canvas&gt;&nbsp;possui apenas dois atributos – width e height. Esses dois atributos são opcionais e podem ser configurados pelo uso das propriedades do&nbsp;DOM&nbsp;(Document Object Model -&nbsp;é uma convenção multiplataforma e independente de linguagem para representação e interação com objetos em documentos HTML5, XHTML e XML.1 2 3 Os nós de cada documento são organizados em uma estrutura de árvore, chamada de árvore DOM. Os objetos na árvore DOM podem ser endereçados e manipulados pelo uso de métodos sobre os objetos. A interface pública de um DOM é especificada em sua interface de programação de aplicações (API)).
&nbsp;Quando nenhum atributo width ou height é especificado, o canvas será configurado com um comprimento de 300 pixels e uma altura de 150 pixels.

&lt;canvas&gt; é um elemento HTML que pode ser usado para desenhar usando linguagem de "script" (normalmente JavaScript). Podemos usar, por exemplo, para desenhar gráficos, fazer composições de fotos ou "simples" animações operando com sprites.&nbsp;


Só para curiosidades, ou não, o elemento &lt;canvas&gt; foi introduzido primeiramente pela Apple para o Mac OS X Dashboard e mais tarde implemetado nos browsers Safari e Google Chrome. Os browsers baseados no Gecko 1.8, como o Firefox 1.5, também suportam este elemento, lembrando sempre que os motores de renderização de um navegador dizem muito sobre ele. O elemento &lt;canvas&gt; é parte da especificação WhatWG Web applications 1.0, que é a base de da documentação do HTML5.

O contexto da dimensão e a renderização do elemento!
O canvas cria uma tela de desenho de tamanho fixo (mas que pode ser alterada por meio de atributos) que mostra um ou mais contextos de renderização, que são usados para criar e manipular o conteúdo exibido e/ou interferido pelo usuário. Em aula estamos trabalhando com a dimensão&nbsp;2D. Outra dimensão que podemos trabalhar é a&nbsp;3D; por exemplo, o WebGL usa um contexto&nbsp;3D, baseado no&nbsp;OpenGL ES.
O canvas é incialmente preenchido com um espaço em branco. &nbsp;Para exibir algo, um script precisa acessar a dimensão de renderização e desenhar nele. O elemento&nbsp;&lt;canvas&gt;&nbsp;possui um método chamado&nbsp;getContext(), usado para obter o contexto de renderização e suas funções de desenho. O método&nbsp;getContext()&nbsp;pede um parâmetro, o tipo do contexto. Para gráficos 2D, como os cobertos por esse artigo, você deve especificar "2d".
&nbsp; &nbsp;&nbsp;var canvas = document.getElementById('tela');
&nbsp; &nbsp; var teste = canvas.getContext('2d');



Desenhando Formas com JavaScript e suas renderizações!

1- A Grid do Canvas:







É a área padrão do Canvas, que vem em tamanho de 150x150px. O posicionamento dos elementos desenhados sempre se posicionarão no canto superior esquerdo.



2 - Retângulo:



Retângulo com preenchimento:

fillRect(x, y, width, height)



Retângulo com contorno:

strokeRect(x, y, width, height)



Retângulo com área totalmente transparente:

clearRect(x, y, width, height)



Exemplo:



&lt;!DOCTYPE HTML&gt;

&lt;html&gt;

&lt;head&gt;

&lt;meta charset="utf-8"&gt;

&lt;title&gt;REC - JS&lt;/title&gt;



&lt;script type="text/javascript"&gt;

function draw() {

&nbsp; var canvas = document.getElementById('canvas');

&nbsp; if (canvas.getContext) {

&nbsp; &nbsp; var rec = canvas.getContext('2d');



&nbsp; &nbsp; rec.fillRect(25,25,100,100);

&nbsp; &nbsp; rec.clearRect(45,45,60,60);

&nbsp; &nbsp; rec.strokeRect(50,50,50,50);

&nbsp; }

}

&lt;/script&gt;



&lt;/head&gt;



&lt;body onload="draw();"&gt;

&nbsp; &nbsp;&lt;canvas id="canvas" width="150" height="150"&gt;Navegador não suporta&lt;/canvas&gt;

&lt;/body&gt;






&lt;/html&gt;


O contexto de renderização

O elemento canvas cria uma tela de desenho de tamanho fixo que configura ou expõe um ou mais contextos de renderização, que são usados ​​para criar e manipular o conteúdo exibido.&nbsp;
No canvas, o contexto da renderização (exibição do conteúdo) será o 2D em função do JavaScript que iremos utilizar. Na exibição 3D (o contexto a ser exibido) utiliza um outro método, por assim dizer, o qual chamamos de experimental - WebGL, baseada em OpenGL ES!


Quando declaramos o canvas, ele é branco, só com as limitações de largura (width) e altura (height) definidas. Para exibir algum conteúdo gráfico precisamos de um script que acesse o contexto de renderização e desenhe sobre ele.&nbsp;


Método getContext():

O elemento &lt;canvas&gt; tem um método muito importante chamado getContext(). Este método é usado para obter o contexto de renderização e suas funções de desenho, no caso: 2D.&nbsp;

Importante! getContext() recebe o tipo de contexto como parâmetro. Para gráficos 2D, que serão abrangidos nesse tutorial, deverá ser especificado "2d".


Exemplo!

&lt;canvas id="minha_tela" width="200" height="200"&gt;&lt;/canvas&gt;

&lt;script&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//definição do canvas e contexto de renderização
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var canvas = document.getElementById('minha_tela');
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var context = canvas.getContext('2d');

&nbsp; &nbsp; &nbsp; &nbsp;  //desenhar um retângulo
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; context.fillRect(50, 50, 100, 100);


&lt;/script&gt;


Método getElementById():

Provavelmente o método mais utilizado no DOM seja o getElementById. Sua função simplesmente retorna o elemento cujo atributo ID foi especificado. Caso o elemento não exista ou o ID informado seja incorreto ele retornará null.

É importante lembrarmos que somente um objeto pode conter um ID específico, ou seja, não podem existir dois objetos em uma página com o mesmo valor de um atributo ID.

Repetindo: o método getElementById vai "buscar" o elemento cuja a identificação foi definida no código, também podemos dizer que ele retorna o ID determinado, ou nó!





Começando a desenhar no Canvas com JavaScript


Métodos:
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;fillRect();&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;strokeRect();

Depois que configuramos o contexto gráfico do nosso canvas, podemos então configurar a visualização utilizando métodos de desenho.
Para desenhar um retângulo, por exemplo, usamos o método fillRect() e, o contorno, strokeRect()!

Sintaxe:

- fillRect(x, y, largura, altura): pinta completamente uma área retangular;

- strokeRect(x, y, largura, altura): desenha um contorno do retângulo.




Os valores x e y se referem à posição do canto superior esquerdo do retângulo. A partir daí, o retângulo vai para a direita (largura) e para baixo&nbsp;(altura).

&lt;canvas id="minha_tela" width="200" height="200"&gt;&lt;/canvas&gt;
&lt;script&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//definição do canvas e contexto de renderização
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var canvas = document.getElementById('minha_tela');
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var context = canvas.getContext('2d');
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; //desenhar um retângulo
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; context.fillRect(50, 50, 100, 100);

&lt;/script&gt;

Neste exemplo, o script irá renderizar um quadrado com posicionamento de 50 pixels na horizontal (x), 50 pixels na vertical (y), largura de 100 pixel, altura de 100 pixel.

Ficaria como a imagem abaixo.





Se trocarmos para o método strokeRect, a renderização ficaria desta forma no canvas!







Propriedades:

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fillStyle

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; strokeStyle

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lineWidth



Podemos configurar algumas propriedades do contexto, de forma a escol-

her as cores e espessuras:



- fillStyle: define a cor do preenchimento



- strokeStyle: configura a cor da linha



- lineWidth: define a espessura da linha em pixels





Exemplo:









Visualização:







Método beginPath();





Este método é utilizado quando temos a necessidade de renderizarmos desenhos mais complexos.&nbsp;



O método beginPath funciona da seguinte forma:



- É um conjunto de comandos de traçado via coordenadas

- Estes comandos de desenhos ficam armazenados na memória aguardando os métodos fill ou stroke para serem chamados e renderizarem o gráfico.











Visualização











moveTo()



Comando muito útil para começarmos a desenhar. Vamos pensar no Canvas como um tela de 300x300px. Para posicionar o início do desenho da nossa figura, dentro do contexto 2D, o moveTo() funcionará como a mesma coisa quando posicionamos o nosso lápis ou pincel em uma tela ou folha.



Exemplo:









Visualização:









lineTo()



Comando que&nbsp;traça uma linha do ponto atual até o ponto indicado.traça uma linha do ponto atual até o ponto indicado.

Esses comandos não desenham as linhas imediatamente, apenas armazenam as informações no path. Devemos chamar o método stroke para



desenhá-las de fato no Canvas!











Visualização: