<canvas width="600" height="400"></canvas>
<script>
function desenhaEsquadro(xa, ya, xc, yc, cor) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = cor;
pincel.beginPath();
pincel.moveTo(xa, ya);
pincel.lineTo(xa, yc);
pincel.lineTo(xc, yc);
pincel.fill();
}
desenhaEsquadro(50, 50, 400, 400, 'black');
desenhaEsquadro(100, 175, 275, 350, 'white');
</script>
Ele quis mostrar que com uma formula correta , qualquer valor que colocar em (xa, ya,) iguais e qualquer valor que colocar em (xc, yc,) iguais e sendo(xa, ya,) menor (xc, yc,) e sem precisar toda hora que quiser um tamanho diferente ter que ir por tentativa e erro ou tentativa e acerto, até achar a proporção correta para tal. Vcs conseguem um um esquadro perfeito com apenas um desenhaEsquadro.
siim ele fez sentido, de maneira mais complicada, mas muito mais eficiente se tiver que ser replicada em quantidade. Por exemplo, se eu quisesse fazer vários esquadros na tela, ou mais triângulos dentro de triângulos.
Fiz meu código como o seu Grasiele!
Grasiele,
Seu código ficou bem claro e objetivo, me ajudou bastante na resolução do meu, tive certa dificuldade de entender a resolução por conta dos cálculos e o seu está bem mais compreensível e direto.
Obrigada pela explicação sobre os cálculos Thiago e Cailane! :) Parece ser mais eficiente mesmo. Cailane e Jairo, fico muito feliz que minha solução tenha ajudado na resolução de vocês!
Oi pessoal! Publiquei minha resolução comentada neste link: https://cursos.alura.com.br/forum/topico-resolucao-comentada-do-exercicio-esquadro-2-220106
Tentei explicar como fazer pra automatizar a criação do esquadro. Espero que gostem!