Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Fiz de uma forma alternativa, através de listas.

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Esquadro #2

por Allen Azevedo de Andrade
| 26k xp | 7 posts

Boa noite! Quando li o exercício, não entendi que deveria encontrar uma forma de calcular a espessura do esquadro para a solução. Assim, eu imaginei que tínhamos somente que fazer o desenho, utilizando a função. A forma mais simples que encontrei foi através de listas, visto que as coordenadas já estavam indicadas. Confesso que depois que li a resposta 'oficial' tive que recorrer ao fórum para entender, pois não sou muito familiarizado com essas fórmulas de geometria. Na verdade não posso dizer que entendi plenamente o que foi feito, mas acho que consigo ver o caminho utilizado. De qualquer forma, segue o meu código:

<!-- esquadro.html -->

<canvas width="600" height="400"></canvas>

<script>

function desenhaEsquadro(xa, ya, xc, yc, cor) {
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    for(var i = 0; i < cor.length; i++){
        pincel.fillStyle=cor[i];
        pincel.beginPath();
        pincel.moveTo(xa[i], ya[i]);
        pincel.lineTo(xa[i], yc[i]);
        pincel.lineTo(xc[i], yc[i]);
        pincel.fill();
    }
}

    var cor = ['black', 'white'];
    var xa = [50, 100];
    var ya = [50, 175];
    var xc = [400, 275];
    var yc = [400, 350];

    desenhaEsquadro(xa, ya, xc, yc, cor);

</script>
2 respostas
por leandro dias de carvalho
| 65.2k xp | 19 posts

Também não entendo muito de Trigonometria. Adorei a forma como você construir a lógica do projeto.

solução!
por Matheus Uener Silva
| 67.4k xp | 23 posts
Secretário

Gostei muito da forma como você pensou na resposta, isso mostra um raciocinio que nao se limita às circunstancias... eu tambem nao me dou nem um pouco bem com geometria e afins, mas para esse problema, acredito que seja mais uma questão de interpretação mesmo do que de matematica, perdoe me dizer assim... ou talvez ainda não tenha ficado claro como utilizar a formula de se criar um triangulo... Deixe me tentar ser mais claro, para que possa haver compreensão. Veja:

xA e yA já estavam expressas, bem como xB e yB e xC e yC... No momento em que você ordena o primeiro movimento do pincel,

//50, 50
pincel.moveTo(xA, yA);

o proximo movimento tende a ser o proximo cujo valores voce tem total certeza:

//400, 400
pincel.lineTo(xC, yC);

o último então é apenas uma questão de entender o que o problema dizia: "Repare que o X do A também é o X do B, e o Y do C também é o Y do B. " Logo:

pincel.lineTo(xA, yC);

Dessa forma teriamos uma função mais ou menos assim:

 function triangulo(xA, yA, xC, yC, cor){
        pincel.fillStyle  = cor;
        pincel.beginPath();
        pincel.moveTo(xA, yA);
        pincel.lineTo(xC, yC);
        pincel.lineTo(xA, yC);
        pincel.fill();
    }

Depois seria preciso apenas 'chamar' a função e definir os parametros informados pela imagem da aula 11 - esquadro #2:

 triangulo(50, 50, 400, 400, 'black');
    triangulo(100, 175, 275, 350, 'white');

Espero poder ter ajudado! Boa sorte e bons estudos!