Tutorial de Canvas - Como desenhar Linhas

Neste tutorial de Canvas, vamos aprender como desenhar linhas e com isso criar vários tipos de gráficos interessantes, como triângulos e cubos.

Estudar Canvas pela Apostila JavaScript Progressivo

Como Desenhar Linhas: beginPath(), moveTo() e lineTo()

Inicialmente, vamos te ensinar a criar linhas simples, ou seja, interligando um ponto a outro, sem segredo e sem mistério.

Mas a linha faz parte de um cenário maior, um 'path' (caminho), através da qual podemos ir interligando linhas e mais linhas, quantas quisermos, para fazermos o path que quisermos.

O primeiro passo, seja para fazer linha ou um path mais complexo, é iniciar com o método beginPath():
context.beginPath();

Agora que 'abrimos a porteira', podemos de fato criar nossa linha.
Toda linha é criada a partir de dois pontos. O primeiro, definimos com o método moveTo(), que recebe dois argumentos, as coordenadas do ponto inicial.

Vamos criar uma linha saindo da posição inicial (0,0):
context.moveTo(0, 0);

Agora, o ponto onde ela termina é informado através do método lineTo(), que também recebe dois argumentos, as coordenadas do ponto que ela termina.
Vamos fazer ela ir até o fim de nosso canvas:
context.lineTo(600, 400);

Por fim, damos um contexto.stroke() para o path ser desenhado:
context.stroke();
Nosso código fica:
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
 </head>
 <body>
  <canvas id = "meuRetangulo" width = "600" height = "400"
      style = "border: 1px solid black;">
  O Canvas não está ativado em seu Browser
 </canvas>
 <script type="text/javascript">
  var canvas = document.getElementById("meuRetangulo");
  var context = canvas.getContext("2d")

  context.beginPath();
  context.moveTo(0, 0);
  context.lineTo(600, 400);
  context.stroke(); //draw path
 </script>
 </body>
</html>
Veja o resultado:
Tutorial de Canvas

Ou seja, recapitulando:
Iniciar o caminho a ser desenhado: beginPath()
Se move para o ponto inicial: moveTo()
Traça uma linha desse ponto inicial até este: lineTo()
Pinta no canvas o resultado: stroke()

Veja que tem uma ordem, uma lógica na coisa. Não decore, aprenda!

Como fazer path no Canvas

Ok, criamos apenas uma linha simples na diagonal, bacana.
Mas da pra ir emendando uma linha na outra.

Vamos criar uma linha paralela ao eixo X, começando no ponto (20,20):
context.beginPath();
context.moveTo(20, 20);

Agora vamos criar a linha, que vai até (200,20) (ponto Y se mantém constante, para ser paralelo ao eixo X):
context.lineTo(200, 20);

Agora vamos descer até o ponto (200,100) (note que mantivemos o ponto X constante, logo ele vai descer paralelo ao eixo Y):
context.lineTo(200, 100);

Agora vamos voltar, paralelo ao eixo X novamente, até o ponto (20,100):
context.lineTo(20, 100);
Damos o stroke() para pintar nossa obra de arte no Canvas.

Veja o código que usamos:
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
 </head>
 <body>
  <canvas id = "meuRetangulo" width = "600" height = "400"
      style = "border: 1px solid black;">
  O Canvas não está ativado em seu Browser
 </canvas>
 <script type="text/javascript">
  var canvas = document.getElementById("meuRetangulo");
  var context = canvas.getContext("2d")

  context.beginPath();
  context.moveTo(20, 20);
  context.lineTo(200, 20);
  context.lineTo(200, 100);
  context.lineTo(20, 100);
  context.stroke();
 </script>
 </body>
</html>
Veja o resultado:
Tutorial de Canvas

Exercício: que linha de comando você adicionaria para fechar o retângulo ?
Escreva nos comentários.

Desenhando um triângulo

Vamos agora desenhar um triângulo retângulo isósceles (ou seja, tem dois lados iguais), de lado de tamanho lado, que você pode definir.

Vamos iniciar pelo ponto A:
Tutorial de Canvas em JavaScript
Ele inicia no ponto (50, 200).
Depois segue para o ponto B, que está afastado de um valor lado do ponto A, mas no mesmo valor do eixo Y, 200.

Depois, subimos para o ponto C, que está no mesmo eixo X (50+lado), porém o eixo Y diminuiu de um valor lado (200-lado).

Por fim, basta fazermos o path ligar para o ponto inicial A(50, 200) e prontinho, temos o triângulo retângulo desenhado.

Veja o código:
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
 </head>
 <body>
  <canvas id = "meuRetangulo" width = "600" height = "400"
      style = "border: 1px solid black;">
  O Canvas não está ativado em seu Browser
 </canvas>
 <script type="text/javascript">
  var canvas = document.getElementById("meuRetangulo");
  var context = canvas.getContext("2d")
  var lado = 100;

  context.beginPath();
  context.moveTo(50, 200); //Ponto inicial
  context.lineTo(50+lado, 200);
  context.lineTo(50+lado, 200-lado);
  context.lineTo(50, 200);
  context.stroke(); //draw path
 </script>
 </body>
</html>

Como desenhar um Cubo

Rode o seguinte código:
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
 </head>
 <body>
  <canvas id = "meuRetangulo" width = "600" height = "400"
      style = "border: 1px solid black;">
  O Canvas não está ativado em seu Browser
 </canvas>
 <script type="text/javascript">
  var canvas = document.getElementById("meuRetangulo");
  var context = canvas.getContext("2d")
  var l = 100;
  var L = 20 + (l/2);

  context.strokeRect(20, 20, l, l);
  context.strokeRect(L, L, l, l);

  context.beginPath();
  context.moveTo(20, 20);
  context.lineTo(L, L);
  context.stroke();

  context.beginPath();
  context.moveTo(20, 20+l);
  context.lineTo(L, L+l);
  context.stroke();

  context.beginPath();
  context.moveTo(20+l, 20);
  context.lineTo(L+l, L);
  context.stroke();

  context.beginPath();
  context.moveTo(20+l, 20+l);
  context.lineTo(L+l, L+l);
  context.stroke();
 </script>
 </body>
</html>
Veja que o resultado é um belo de um Cubo:
Tutorial de Canvas completo em JavaScript

Isso é feito com um pouco de geometria.
Primeiro, usamos apenas o método strokeRect para desenhar um quadrado (que também é um retângulo), sem qualquer preenchimento (fill).

O grande segredo é definir como l o lado dos quadrados, o retângulo de cima começa no ponto (20,2) e o quadrado de dentro vai iniciar no ponto (L,L), onde L é centro do outro quadrado. Pela Matemática:
L = 20 + (l/2);

Depois, precisamos desenhar quatro linhas. Elas ficam fáceis de desenhar se você desenhar os quadrados da seguinte maneira, com as coordenadas deles:

Tutorial de JavaScript e Canvas


Agora é só ir interligando os ponto.
Lembre-se: para desenhar cada linha, use o beginPath e dê o stroke ao final para ela aparecer.

Nenhum comentário:

Postar um comentário