Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Outra resolução: 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 Estudante
| 55.8k xp | 3 posts

Aceito sugestões!

<!-- esquadro.html -->
<meta charset="UTF-8">

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

        pincel.fillStyle = "white";
        pincel.beginPath();
        pincel.moveTo((xa * 2), (xa * 3.5));
        pincel.lineTo((xa * 2), (xa * 7));
        pincel.lineTo((xa * 5.5), (xa * 7));
        pincel.fill();
    }

    desenhaEsquadro(50, 50, 400, 400, "black");

</script>
1 resposta
solução!
por Akashi
| 220.4k xp | 284 posts

Sugestão Giovanni:

<meta charset="UTF-8">

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var cores = ["black", "white"];

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

        for(i = 0; i <= 1; i++)  {
            pincel.fillStyle = cores[i];
            pincel.beginPath();
            pincel.moveTo(xa + (50 * i), ya + (125 * i));
            pincel.lineTo(xa + (50 * i), yc - (50 * i));
            pincel.lineTo(xc - (125 * i), yc - (50 * i));
            pincel.fill();
        }
    }

    desenhaEsquadro(50, 50, 400, 400);

</script>