Nao consegui entender a logica

Bom dia Jhones! O que exatamente não entendeu?? Posso tentar te ajudar

Abraços

Olá Jhones

Vamos estudar este exercício de uma forma diferente.

Como não entendi em que exato momento você esta com problemas, vou explicar desde o início.

No exemplo do exercício 'Esquadro 2', podemos ver 2 triângulos (um triângulo branco em cima de um triângulo preto), sabemos que eles tem três lados e também sabemos que ele tem 3 pontas.

Prestando atenção nestas 3 pontas do triângulo, vamos chama-las de pontas A, B e C

Então vamos montar a função que desenha o triângulo.

Primeiro vamos escolher uma cor para o triângulo com o comando:

pincel.fillStyle="black";

depois vamos dizer para o navegador que o desenho vai começar, utilizando o comando:

pincel.beginPath();

E marcando a primeira ponta como o comando moveTo na posição largura 50 e altura 50, com o comando:

pincel.moveTo(50, 50);

Agora precisamos riscar com o pincel até a segunda ponta de largura 50 e altura 400, com o comando lineTo:

pincel.lineTo(50, 400);

E por último riscar o pincel até a terceira e última ponta na largura 400 e altura 400, com o comando:

pincel.lineTo(400, 400);

Sem esquecer de finalizar o desenho do triângulo com o comando:

pincel.fill();

A partir de agora vamos chamar a largura da tela de 'X'. E vamos chamar a altura da tela de 'Y'.

Logo, a largura da ponta 'A' do triângulo vai se chamar de 'XA' e a altura da ponta 'A' do triângulo vai se chamar 'YA', então teremos também 'XB' como largura da ponta 'B' e 'YB' como a altura da ponta 'B'.

Agora vamos montar a função e substituir todos os valores 50 e 400 por variáveis (igual como vimos no curso de lógica de programação 1).

<canvas width="600" height="400"></canvas>
<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    function desenhaEsquadro(xa, ya, xb, yb, xc, yc, cor) {
        pincel.fillStyle="black";
        pincel.beginPath();
        pincel.moveTo(xa, ya);
        pincel.lineTo(xb, yb);
        pincel.lineTo(xc, yc);
        pincel.fill();
    }

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

A questão agora é que achamos uma forma de REDUZIR o nosso código aproveitando alguns valores repetidos, e que possuem a mesma função, ao invés de criarmos 6 variáveis para o sistema, podemos usar somente 4, mesmo que se repitam.

Vamos lá!

<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');
</script>

A variável 'XA' esta se repetindo na linha pincel.lineTo(xa,yc); , mas isso acontece porque o valor de 'XA' e a variável 'XB' que deveria estar alí são exatamente iguais e desempenham a mesma função que é desenhar a ponta de largura 50. A mesma coisa acontece com a variável 'YC' que igualmente a variável 'YB' também esta desenhando a ponta de altura 400.

Este procedimento é uma forma de reduzir o número de variáveis e também código escrito em um sistema. Pode complicar um pouco no início, mas vai tornar o seu sistema bem mais rápido de utilizar.

Oi Wagner! Mandou bem!

Jhones, a explicação do Wagner esclareceu?