Oi, Daniel! Tudo bem?
Desde já, peço desculpas pela demora em retornar.
Muito obrigada por ter compartilhado com o fórum uma solução para o exercício, ela ficou muito bacana! Apresentar a nossa ideia para outras pessoas, não só contribui para o nosso aprendizado, como também para o aprendizado coletivo!
Na programação, existem diferentes maneiras de desenvolver um código e de resolver um problema. Em determinados contextos, precisaremos realizar constantes testes para chegar no resultado esperado, e foi isso que aconteceu na resolução desta atividade.
Observe novamente o código para desenhar o esquadro:
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
function desenhaEsquadro(xa, ya, xc, yc, cor) {
pincel.fillStyle = cor
pincel.beginPath();
pincel.moveTo(xa, ya);
pincel.lineTo(xa, yc);
pincel.lineTo(xc, yc);
pincel.fill();
pincel.fillStyle = 'white'
pincel.beginPath();
pincel.moveTo((6 * xa + xc) / 7, (9 * ya + 5 * yc) / 14);
pincel.lineTo((6 * xa + xc) / 7, (ya + 6 * yc) / 7);
pincel.lineTo((5 * xa + 9 * xc) / 14, (ya + 6 * yc) / 7);
pincel.fill();
}
desenhaEsquadro(50, 50, 400, 400, 'black');
</script>
Os números e as operações presentes nos cálculos foram escolhidos para que, ao substituir os valores das coordenadas xa, ya, xc e yc, o triângulo retângulo interno possuísse a metade das medidas do triângulo retângulo externo. Para isso, foi utilizado o recurso matemático de média aritmética, que está presente na determinação de cada coordenada.
A partir desses cálculos, chegamos em uma maneira dinâmica de desenhar um esquadro — maneira essa que, independente dos valores passados como parâmetro para ilustração, teremos como resultado uma relação de proporcionalidade entre as figuras.
Espero ter ajudado, Daniel. Caso surjam dúvidas após minha explicação ou ao longo dos seus estudos, fico à disposição para ajudá-lo!
Forte abraço e até mais!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.
