Estudar Canvas pela Apostila JavaScript Progressivo
Como Desenhar Linhas: beginPath(), moveTo() e lineTo()
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:
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:
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:
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:
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:
Agora é só ir interligando os ponto.
Lembre-se: para desenhar cada linha, use o beginPath e dê o stroke ao final para ela aparecer.
Supondo que eu queira criar uma reta entre dois pontos com o mouse clicado, como eu deveria fazer? Meu objetivo é criar uma matriz básica de n pontos, tal que n[X0,Y0] seja o começo e n[Xn,Yn] seja o fim. Onde n seja um valor que eu defino em tempo de execução, pegando o valor de um campo de texto formatado para aceitar apenas números inteiros e positivos. Com dois for faço uma matriz de linhas horizontais e verticais predefinidas, mas não é este meu objetivo e sim, criar apenas a intercessão entre estas retas, unindo elas com o click do mouse pressionado. Alguém tem uma ideia de como fazer? Ah! É só por diversão mesmo. Não é trabalho escolar, nem alguma coisa pra empresa. É pessoal e de uso público.
ResponderExcluir