Entrar Ainda não tem acesso?
2
respostas

Não entendi a versão do professor, e a resposta dele nem rodou no Browser.

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 Eduardo Gomes Sousa
| 44.2k xp | 22 posts
<canvas width="600" height="400"></canvas>

<script>

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


    function fazPreto (xa,ya,cor){

        pincel.fillStyle=cor;
        pincel.beginPath();
        pincel.moveTo(50, 50);
        pincel.lineTo(xa,ya);
        pincel.lineTo(xa-350,ya);
        pincel.fill();        
    }

    function fazBranco (xb,yb,cor){

        pincel.fillStyle=cor;
        pincel.beginPath();
        pincel.moveTo(100, 175);
        pincel.lineTo(xb,yb);
        pincel.lineTo(xb-175,yb);
        pincel.fill();        
    }

fazPreto(400,400,'black');
fazBranco(275,350,'white');


</script>
2 respostas
por Róger Homem Heck
| 16.4k xp | 29 posts

Bem, vamos pelo começo. O programa dele está sem o Canvas, por esse motivo, o programa não rodou, pois não havia tela para ele pintar. Então, se você adicionar a tela, o programa irá rodar.

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

Agora, sobre a segunda parte do programa dele, foi um cálculo matemático para gerar automaticamente o esquadro branco, sem ter que colocar uma nova função (como fiz na minha). Desse modo, gera sozinho o esquadro branco sem ter que adicionar mais informações. (6xa + xc) / 7 = (6 50 + 400 ) / 7 = (300+400) / 7 = 700 / 7 = xa = 100

Espero ter ajudado.

por Matheus Lopes de Sá
| 63.5k xp | 14 posts
MicroEmpreendedor

O código que criei também ficou o oposto do professor, mas acabei chegando ao mesmo resultado. vou compartilhar o código aqui!

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

<script>
    function desenhaTriangulo(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();
    }
    desenhaTriangulo(50,50,400,400,'black');
    desenhaTriangulo(100,175,275,350,'white');
  /
</script>