Desenhando linhas através do canvas em JavaScript
Vamos começar com o simples - desenhando linhas. Para entender como isso é feito, imagine que você tem uma folha de papel e um lápis. Você pode desenhar nessa folha, ou pode, sem desenhar, simplesmente mover o lápis para o ponto desejado.
O JavaScript funciona da mesma forma: ele tem
um lápis (ou uma caneta para desenhar), para o local
desejado você pode movê-lo usando
o método moveTo, e desenhar - usando
o método lineTo.
Ambos os métodos recebem como parâmetros o ponto para
o qual mover a ponta da caneta - o primeiro parâmetro
a coordenada horizontal, e o segundo - a
vertical. A origem das coordenadas - o ponto 0,
0 - é o canto superior esquerdo do elemento.
Quando a caneta é movida para o ponto desejado -
o método moveTo apenas move, e
lineTo durante o movimento desenha
uma linha da posição atual da caneta até o ponto
para o qual ela se moverá.
No entanto, se executar o código acima
nada acontecerá: é necessário escrever
mais dois comandos: o primeiro comando beginPath
deve ser especificado antes de começar a desenhar a
linha, e o segundo comando stroke deve
ser chamado após todas as combinações de moveTo
e lineTo para que a linha seja desenhada.
Então, vamos escrever um código funcional para desenhar uma linha:
Vamos desenhar uma linha
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Vamos desenhar uma seta
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Vamos desenhar um triângulo
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
Vamos desenhar um quadrado
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
Fechamento de figuras
Para desenhar uma figura fechada, não é necessário
fazer todas as linhas - a última linha pode
ser desenhada automaticamente e fechar a figura.
Para isso, antes do método stroke deve-se
chamar o método closePath.
Este método tenta fechar a figura, desenhando uma linha reta do ponto final ao ponto inicial. Se a figura já estava fechada ou é apenas um ponto, então o método não faz nada.
Vamos desenhar um triângulo usando closePath:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - este passo omitimos
ctx.closePath();
ctx.stroke();
:
Preenchimento de figuras
Em vez do método stroke, pode-se usar
o método fill - com isso, a figura não precisa
necessariamente estar completamente fechada - ela será preenchida
mesmo assim:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - este passo omitimos
//ctx.closePath(); - e este também
ctx.fill();
:
