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

Esquadro

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 Johnathan Menezes Nobrega
| 33.2k xp | 19 posts

Acho q houve um pequeno equivoco kkkk mandei assim mesmo pq queria entender bem o que errei 

<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(xc, yc);
    pincel.lineTo(400, 400);
    pincel.fill();

    pincel.fillStyle=cor;
    pincel.beginPath();
    pincel.moveTo(xa, ya);
    pincel.lineTo(xc, yc);
    pincel.lineTo(275, 350);
    pincel.fill();
    }

    desenhaEsquadro(50, 50, 50, 400, 'black');
    desenhaEsquadro(100, 175, 100, 350, 'white');



</script>
1 resposta
solução!
por Cássio Murilo
| 1276.4k xp | 2204 posts
Instrutor Agile Master

Fala, Jonathan! Tudo bem contigo?

Desculpe a demora em dar um retorno!

Dessa forma, quando invocamos da primeira vez a função ele coloca os valores em toda a estrutura, mas depois, quando invocamos novamente ele faz o mesmo processo sobrescrevendo a primeira.

Para resolvermos, já que temos uma repetição de blocos de código, vamos deletar um e criar mais dois parâmetros para substituirmos os valores do segundo lineTo

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

    pincel.fillStyle=cor;
    pincel.beginPath();
    pincel.moveTo(xa, ya);
    pincel.lineTo(xc, yc);
    pincel.lineTo(lineToX, lineToY);
    pincel.fill();
    }

Pronto! Agora acrescentamos na invocação da função

    desenhaEsquadro(50, 50, 50, 400, 'black', 400, 400);
    desenhaEsquadro(100, 175, 100, 350, 'white', 275, 350);

Espero ter ajudado, Jonathan!

Um abraço e bons estudos