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

[Dúvida] Bandeira do brasil, circulo aparece parcial

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

por Bruno de Souza Alegria Simões
| 12.3k xp | 1 posts

Boa noite; Segue código do exercicio da bandeira do brasil; No entanto, meu circulo azul aparece apenas parcialmente. Conferi com o gabarito do exercicio, e ficou certinho ( exceto a ordem das linhas dos triangulos ). O que sera que aconteceu ? =(

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

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

// fundo verde bandeira
    pincel.fillStyle="green";
    pincel.fillRect(0, 0, 600, 400)

// dois triangulos amarelos ( que formam o lozango amarelo)
    pincel.fillStyle="yellow";

    pincel.beginPath();
    pincel.moveTo(50,200);
    pincel.lineTo(550,200);
    pincel.lineTo(300,50)
    pincel.fill();

    pincel.beginPath();
    pincel.moveTo(50,200);
    pincel.lineTo(550,200);
    pincel.lineTo(300,350)
    pincel.fill();

//circulo azul
    pincel.fillStyle="darkblue";

    pincel.beginPath();
    pincel.arc(300, 200, 100, 0, 2*3,14);
    pincel.fill();



</script>

Bandeira do Brasil aparecendo apenas circulo parcial

1 resposta
solução!
por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi Bruno, tudo bem?

Entendi sua dúvida. Quando utilizamos pincel.arc() devemos estipular os seguintes parâmetros: a posição x (horizontal), posição y (vertical), o tamanho do raio, o ângulo no qual o arco começa em radianos, medido a partir do eixo x positivo e o ângulo no qual o arco termina em radianos, medido a partir do eixo x positivo (duas vezes o valor de Pi).

pincel.arc(x, y, raio, 0, 2*3.14);

Os parâmetros são separados por vírgulas e o valor de Pi recebe o valor 3.14, sendo as casas decimais separadas por um ponto.

No caso do seu código você colocou uma vírgula para separar as casas decimais:

pincel.arc(300, 200, 100, 0, 2*3,14);

Por conta disso o Javascript realiza a leitura dos parâmetros de maneira inadequada. Sendo assim, para corrigir o problema é necessário escrever 3.14 .

Outra forma de escrever essa linha de comando é utilizar a expressão Math.PI que apresenta o valor de Pi. 

pincel.arc(300, 200, 100, 0, 2*Math.PI);

Gostaria também de aproveitar para mostrar uma forma diferente de realizar o desenho do losango, desenhando um traço a mais com a propriedade pincel.lineTo() :

pincel.fillStyle = 'yellow';
pincel.beginPath();
pincel.moveTo(300, 50);
pincel.lineTo(60,200);
pincel.lineTo(300,350);
pincel.lineTo(520,200);
pincel.fill();

Perceba que ao invés de desenhar dois triângulos, é traçado apenas um losango, reduzindo algumas linhas de código e tornando - o mais suscinto e direto.

Espero ter ajudado. Caso tenha outras dúvidas, estarei à disposição para te auxiliar.

Grande abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.