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.
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