não entendi temos uma coordenada de 300,50 as coordenadas seguintes são 50, 200 e a seguir 550, 200, eu não entendi onde os pontos se ligam nestas coordenadas, por favor me ajudem.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
não entendi temos uma coordenada de 300,50 as coordenadas seguintes são 50, 200 e a seguir 550, 200, eu não entendi onde os pontos se ligam nestas coordenadas, por favor me ajudem.
Oi Evandro, tudo bom?
A bandeira é baseada num quadrado verde, de 600px de largura e 400px de altura:
pincel.fillStyle='green';
pincel.fillRect(0, 0, 600, 400);Acima desse quadrado, existe o losango amarelo, segue código com comentario:
pincel.fillStyle='yellow';
pincel.beginPath();
//Aqui,estamos posicionando o pincel exatamente na metade da largura 300px e 50px de altura
// Ou seja, estamos pegando o primeiro ponto inferior do losango
pincel.moveTo(300, 50);
// aqui traçamos a linha até o canto esquerdo do losango
pincel.lineTo(50, 200);
// aqui traçamos a linha até o superior do losango
pincel.lineTo(550, 200);
// aqui a gente preenche metade do losango, formado pelo triangulo (300,200) (50,200) (550,200) no plano cartesiano
pincel.fill();
// aqui o procedimento é o mesmo porém para lado direito do losango =)
pincel.beginPath();
pincel.moveTo(300, 350);
pincel.lineTo(50, 200);
pincel.lineTo(550, 200);
pincel.fill();Abraço!
Como ter uma ideia melhor de onde isso vai parar na tela? O ponto 0,0 é o canto superior esquerdo. O ponto 600,400 é o inferior direito. Repare em alguns outros pontos espalhados nas nossas coordenadas X e Y:
Espero ter ajudado e bons estudos