Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Não entendi o código do instrutor

Não entendi como funciona o código do instrutor no segundo esquadro.

Código do instrutor:

<!-- esquadro.html -->

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

Meu código:

<!-- esquadro.html -->

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

Não entendi estas instruções . Poderiam me ajudar?

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

A forma como criei a função chegou no resultado, porém, está correto ?

2 respostas
solução

Bom, se você reparar os esquadros são proporcionais, sendo que o preto é 4 vezes maior que o branco. Sabendo disso, o instrutor usou de alguma fórmula da geometria para achar de forma mais rápida a posição ideal para o esquadro ficar exatamente no centro. Se ele não tivesse utilizado essa fórmula, provavelmente teria que ficar na tentativa e erro para descobrir aqueles valores dados na imagem. Tendo em vista que as coordenadas já foram dadas, o seu código não está errado. O mais importante dessa aula era utilizar de forma correta a criação dos métodos e isso você fez perfeitamente. Acredito que a parte matemática que o instrutor utilizou não tem tanta relevância para a aula em si e fica mais de curiosidade de que os valores poderiam ser passados de outra forma, por exemplo usando fórmulas matemáticas.

Obrigada pelo esclarecimento Paulo =)