Erro ao tentar o pincel.fill(); | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Solucionado (ver solução)

Solucionado
(ver solução)

1
resposta

por Lucas Merlin Knoll Da Silva

| 60.7k xp | 4 posts

Boa tarde,

Uma dúvida. Tentei desenhar a bandeira do Brasil diferente do professor. Tentei desenhar o losango diretamente, em vez de fazer dois triângulos. Porém acontece um erro ao preencher a bolinha azul. Pensei que o erro estava no valor do PI. Pesquisei na internet. Mas mesmo corrigindo da errado. Alguém pode me ajudar?

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

<script>

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

pincel.fillStyle = "green";
pincel.fillRect(0, 0, 600, 400);

pincel.fillStyle = "yellow";
pincel.beginPath();
pincel.moveTo(300, 50);
pincel.lineTo(550, 200);
pincel.lineTo(300, 350);
pincel.lineTo(50, 200);
pincel.fill();

pincel.fillStyle = "darkblue";
pincel.arc(300 , 200, 100, 0, (2 * Math.PI));
pincel.fill();
console.log(Math.PI);

</script>

1 resposta

solução!

por Gabriel Leite

| 3484k xp | 5398 posts

Instrutor

22/06/2019

Boa noite, Lucas! Como vai?

Faltou apenas um pincel.beginPath() antes de começar a desenhar o círculo azul! O mestre Flávio mostra isso nessa aula!

Segue o código correto!

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

<script>

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

        pincel.fillStyle = "green";
        pincel.fillRect(0, 0, 600, 400);

        pincel.fillStyle = "yellow";
        pincel.beginPath();
        pincel.moveTo(300, 50);
        pincel.lineTo(550, 200);
        pincel.lineTo(300, 350);
        pincel.lineTo(50, 200);
        pincel.fill();

        pincel.fillStyle = "darkblue";
        pincel.beginPath(); // Faltou essa linha!
        pincel.arc(300, 200, 100, 0, (2 * Math.PI));
        pincel.fill();
        console.log(Math.PI);

</script>

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!