segunda-feira, 25 de fevereiro de 2013

O elemento <canvas> do HTML5

O "<canvas>" é um container (uma área retangular) do HTML 5 para desenhar gráficos em tempo de execução, através de scripts (normalmente JavaScript).

O exemplo abaixo ilustra o desenho de um canvas com 100px de largura e 100px de altura, com uma borda de 1px:

Visualização:
Your browser does not support the HTML5 canvas tag.
Código fonte:
<canvas id="meuCanvas1" height="100" width="100" style="border:1px solid #000000;"></canvas>

Dentro desse canvas, é possível desenhar diferentes formas geométricas.

Para desenhar linhas ("paths"), por exemplo, podemos utilizar os métodos "moveTo()" e "lineTo()", conforme o exemplo abaixo:

Visualização:
Your browser does not support the HTML5 canvas tag.
Código fonte:
<script>
//pega uma referência do canvas "meuCanvas"
var c = document.getElementById("meuCanvas");
//pega uma referência pro contexto 2D do canvas
var ctx = c.getContext("2d");
//move o "pincel" para a posição x=0 e y=0 (aqui será o início da linha)
ctx.moveTo(0,0);
//determina a posição final da linha como sendo x=50 e y=75
ctx.lineTo(50,75);
//desenha a linha conforme as coordenadas passadas anteriormente
ctx.stroke();
</script>

Para desenhar um retângulo, podemos utilizar o método "fillRect()", conforme o exemplo abaixo:

Visualização:
Your browser does not support the HTML5 canvas tag.
Código fonte:
<script>
var c = document.getElementById("meuCanvas");
var ctx = c.getContext("2d");
//define a cor de preenchimento
ctx.fillStyle="#0000FF";
//cria um retângulo nas coordenadas x=0 e y=0, de largura 50px e altura 50px.
ctx.fillRect(0,0,50,50);
</script>

Já para desenhar um círculo, podemos utilizar o método "arc()", conforme o exemplo abaixo:

Visualização:
Your browser does not support the HTML5 canvas tag.
Código fonte:
<script>
var c = document.getElementById("meuCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
//o círculo começará a ser desenhado nas posições x=25 e y=25 e terá um raio 10px
ctx.arc(50,50,25,0,2*Math.PI);
ctx.stroke(); //ou ctx.fill() pro círculo ficar pintado
</script>


Além de desenhar formas geométricas, também é possível desenhar textos no canvas, através dos métodos "fillText()" ou "strokeText()", conforme o exemplo abaixo:

Visualização:
Your browser does not support the HTML5 canvas tag.
Código fonte:
<script>
var c = document.getElementById("meuCanvas");
var ctx = c.getContext("2d");
ctx.font="18px Arial";
ctx.fillText("Bom dia! =)",5,50);
</script>


Por fim, utilizando o que já foi apresentado, podemos desenhar a bandeira do Brasil (simplificada), conforme o exemplo abaixo:

Visualização:
Your browser does not support the HTML5 canvas tag.
Código fonte:
<canvas id="myCanvas5" width="250" height="150" style="border:1px solid #d3d3d3;"/>

<script>
var c = document.getElementById("myCanvas5");
var ctx = c.getContext("2d");

//Desenha a retângulo verde
ctx.fillStyle="green";
ctx.fillRect(0,0,250,150);

//Desenha o losango amarelo
ctx.fillStyle = "#FCFF00";
ctx.beginPath();
ctx.moveTo(125,0);
ctx.lineTo(250,75);
ctx.lineTo(125,150);
ctx.lineTo(0, 75);
ctx.lineTo(125,0);
ctx.fill();
ctx.closePath(); 

//Desenha o círculo azul
ctx.beginPath();
ctx.fillStyle="#00027F";
ctx.arc(125,75,50,0,2*Math.PI);
ctx.fill();
ctx.closePath();

//Desenha a faixa branca
ctx.fillStyle="#FFFFFF";
ctx.fillRect(75,65,100,15);

//Desenha o texto
ctx.beginPath();
ctx.fillStyle="#000000";
ctx.font="10px Arial";
ctx.fillText("Ordem e Progresso",80,75);
ctx.fill();
ctx.closePath();

</script>

Bom, esses são apenas algumas questões iniciais sobre o que pode ser feito com o elemento "<canvas>" do HTML 5. Existem muitas questões não abordadas aqui e inúmeros exemplos de desenhos complexos na Web - basta ter interesse e começar a praticar!

Nenhum comentário: