Entrar Ainda não tem acesso?
1
resposta

Solução: Esquadro #2

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 Estudante
| 55.4k xp | 101 posts

Olá pessoal!

Segue abaixo a solução do problema:

Fiquei com uma dúvida, se alguém puder ajudar-me agradeço.

Verifiquei a solução do professor, mas não entendi o porquê de realizar as contas para achar a medida do triangulo menor, não seria mais fácil chamar a função e dentro dela já jogar as coordenadas ? Assim como segue o código abaixo.

<meta charset="UTF-8">

<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();
}

desenhaEsquadro (50, 50, 400, 400, "black");
desenhaEsquadro (100, 175, 275, 350, "white");


</script>
1 resposta
por Marcos da Silva Xavier
| 29.8k xp | 2 posts
Engenheiro de Suporte ao Cliente

Opa, o método que o professor usou foi apenas um dos que poderia ser feito, por exemplo, o meu, eu apenas somei e subtraí pra poder dar o valor do esquadro menor, dá uma olhadinha:

<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(xa + 50, ya + 125);
        pincel.lineTo(xa + 50, yc - 50);
        pincel.lineTo(xc - 125, yc - 50);
        pincel.fill();

}

desenhaEsquadro(50, 50, 400, 400, 'black');

</script>