Entrar Ainda não tem acesso?
4
respostas

Uma solução para o problema do 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 Cristian Guilherme Batalha Petry
| 91.2k xp | 13 posts

Para formar o triângulo com o canvas precisamos traçar por meio das linhas o caminho para fechar nosso esquadro.

Portanto temos:

  • Ponto A (X, Y);
  • Ponto B (X, Y);
  • Ponto C (X, Y);

Sabemos que o XA é igual o XB enquanto que o YB é igual o YC, portanto não é necessário saber os valores do ponto B se obtivermos os valores do ponto A e ponto C.

Por isso que a função funciona adequadamente mesmo sem termos nenhum valor referente ao ponto B, pois ele não é fundamental para formarmos o esquadro. 


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

<script>

    function desenhaEsquadro(xa, ya, xc, yc, cor){
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');  
         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>
4 respostas
por Kássia Guterres Schipper
| 65.9k xp | 7 posts

Cheguei na mesma conclusão, achei mais simples que a do instrutor!

por Victória César
| 93.4k xp | 47 posts

Cheguei na mesma conclusão, também achei mais simples. Obrigada por compartilhar o código!

por Romulo Alesandro Celhor Ladeira
| 48.8k xp | 2 posts

Acho que o problema dessa solução é a função deveria criar um esquadro, e essa função em si só cria um triângulo. Mas realmente a solução do professor está muito mal explicada e o máximo que eu consegui fazer oi algo assim também.

por Thyéz de Oliveira Monteiro
| 52.7k xp | 2 posts
Estudante autodidata 
<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    function criaTriangulo(ax, ay, cx, cy, cor) {
        pincel.fillStyle= cor;
        pincel.beginPath();
        pincel.moveTo(ax, ay);
        pincel.lineTo(ax, cy);
        pincel.lineTo(cx, cy);
        pincel.fill();
    }

    function criaEsquadro() {
        criaTriangulo(50, 50, 400, 400, 'black');
        criaTriangulo(100, 175, 275, 350, 'white');
    }

    criaEsquadro();

</script>

Cheguei a mesma conclusão antes de ver a solução do professor. Fui direto ao ponto. E sinceramente estranhei aquele monte de conta lá, mas fiz uns testes copiando aquelas contas e usando console.log, e vi que realmente ela dá o ponto exato. Uma hora vou me deparar com coisas assim e preciso fazer meus testes pra entender como aquela solução foi criada. Enfim. Parabéns a todos que conseguiram de outro jeito ou até mais simples.