Entrar Ainda não tem acesso?
2
respostas

Olá, boa tarde! Fiz esse código após alguns cálculos. Nele o esquadro branco - independente dos valores atribuídos ás variáveis - permanecerá centralizado. Contudo, ele não é proporcional ao esquadro preto.

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 Tamires Paulino Chaves
| 32.3k xp | 17 posts

Esse é o código proposto pelo professor:

<html>
    <canvas width="600" height="600"></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, 300, 300, 'black');
        </script>
    </html>

Esse é o resultado:

Esse é o resultado obtido com o código do professor

Esse é o código que eu escrevi:

<html>
    <canvas width="600" height="600"></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((xa + 50), (xa + 125));
                pincel.lineTo((xa + 50), (yc - 50));
                pincel.lineTo((xc - 125), (yc - 50));
                pincel.fill();
            }

            desenhaEsquadro(70, 70, 400, 400, 'black');
        </script>
</html>

Esse é o resultado do meu código:

Meu_resultado

2 respostas
por Tamires Paulino Chaves
| 32.3k xp | 17 posts

Se alguém puder me ajudar entender a resolução proposta pelo professor, ficarei grata! :)

por Victor Costa Santos
| 1947.1k xp | 3758 posts
Alura Scuba Team Monitor de ForumOps

Olá Tamires, tudo bem?

No mundo da programação existem diferentes maneiras de desenvolver um código e atingir um objetivo, algumas soluções serão mais custosas, outras nem tanto, mas sempre trarão aprendizados.

Para entender a resolução do instrutor, vamos observar a função responsável por desenhar o esquadro:

function desenhaEsquadro (xa, ya, xc, yc, cor){

    // Esquadro externo
    pincel.fillStyle= 'cor';
    pincel.beginPath();
    pincel.moveTo(xa, ya);
    pincel.lineTo(xa, yc);
    pincel.lineTo(xc, yc);
    pincel.fill();

    // Esquadro interno
    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, 300, 300, 'black');// passagem de valores

No trecho acima, os números passados na função desenhaEsquadro() são responsáveis por fornecer as coordenadas do esquadro. Já a função moveTo() e lineTo() são responsáveis por realizar os cálculos relacionados a este desenho do esquadro externo e do esquadro interno.

Para desenhar o primeiro esquadro, foi utilizado os parâmetros passados na chamada da função desenhaEsquadro(). Já no segundo esquadro, é necessário realizarmos cálculos adicionais para que a proporção seja mantida, como criado em seu código, onde a proporção foi definida adicionando ou retirando valores dos parâmetros.

Os cálculos utilizados pelo instrutor no entanto, são cálculos que envolvem uma grande quantidade de números e esses números são baseados em cálculos matemáticos de média aritmética e fatoração. Os resultados dessas operações irão definir as coordenadas e qual a proporção entre as distâncias horizontal e vertical do esquadro. Porém, desmistificar esta fórmula passo a passo usando operações matemáticas pode ser assustador em um primeiro momento, já que iremos utilizar inúmeras fórmulas e conceitos de trigonometria para chegar em uma operação reduzida que considera os números utilizados, por isso, neste momento foi explicado apenas a teoria.

Vale ressaltar que a área da programação também envolve matemática, mas não é pré-requisito e não precisa ser nenhuma especialista, é apenas um diferencial - neste caso em específico o instrutor foi além, mas não se preocupe, sua solução também está correta e atende bem a proposta de resolução da atividade.

Espero ter ajudado. Conte sempre com a Alura para evoluir seus estudos.

Em caso de dúvidas fico à disposição.

Grande abraço!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!