3
respostas

Socorro não consigo entender como funciona o comando lineTo();

<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>

var tela = document.querySelector("canvas");

var pincel = tela.getContext("2d");

pincel.fillStyle = "yellow";
pincel.beginPath();
pincel.moveTo(300,200);
pincel.lineTo(200,400)
pincel.lineTo(400,400)
pincel.fill()

</script>

eu não entendo como lineTo faz um triangulo? entendi mais ou menos que moveTo pede para o pincel começar a desenhar naquela determinada coordenada mais o lineTo não o que entendi e que faça uma linha da cordenada 200 para 400 uma linha reta agora 400 para 400 não entendi?

3 respostas

Oi Petrus, vou tenta

(x, y) representa na página a largura e altura, iniciando no (0,0) no canto superior esquerdo

moveTo(300,200); //  inicia em x=300 e y=200

lineTo(200,400); // traça uma linha até o x=200 e o y=400. 
//Isso faz com que a linha vai -100 para esquerda e +200 para baixo em relação (300,200)

lineTo(400,400); // traça nova uma linha onde o x vai para 400. 
//Isso quer dizer q a linha foi +200 para a direita em relação a (200,400)

entendi algumas coisas outras não por exemplo quando a linha no caso começa em x300 y200 e vai desenhar uma linha reta no caso de na cordenada x200 e y400 blz mais pelo que entendi ao mover de x300 para x200 ele na verdade vai um pouco pro lado esquerdo e o y200 para y400 ele vai 200 positivo no caso pro lado direito mas em x400 e y400 ele começa uma linha nova ou continua a antiga?

Oi Petrus, continua a antiga

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software