Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Bandeira-Brasil

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Desenhando gráficos com Canvas e atividade Ordem e Progresso

por Talita Azevedo
| 221.8k xp | 182 posts
Moderador

Pessoal, Estava tentando desenhar a bandeira do Brasil com javascript, e logo após terminar fui comparar meu código com o do professor, estava um pouco diferente, poderiam me dizer se estou no caminho certo? poderia melhorar ? segue abaixo meu código.

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



        //  triangulo parte direita
        pincel.fillStyle = 'yellow';
        pincel.beginPath();
        pincel.moveTo(300, 50);
        pincel.lineTo(300, 350);
        pincel.lineTo(550, 200);
        pincel.fill();

      //  triangulo parte esquerda

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

        //circulo
        pincel.fillStyle ='darkblue';
        pincel.beginPath();
        pincel.arc(300, 200, 100, 0, 2 * 3.14);
        pincel.fill();



  </script>


</body>
3 respostas
solução!
por Joel Spinelli
| 628.4k xp | 635 posts

Oi Talita,

eu dei uma olhada aqui no código e no resultado, infelizmente eu não tenho como comparar com o da aula pois não fiz o curso xD

Mas vamos lá, esse foi o código que você fez certo? Talvez pesquisou alguma coisa na internet, fez uma revisão nas aulas, mas foi você que fez, certo? Se sim, eu acho que você está no caminho certo, pois talvez o código que o professor fez ficou mais simples, porém você atingiu o mesmo resultado, e isso é o mais importante, e seu código está bem simples e documentado. Agora "melhorar" sempre tem como, vai do sei conhecimento de programação e da API, talvez somente reorganizar o código (não que o seu está desorganizado, pelo contrário), é uma forma de melhorar.

Bom acredito que você se saiu muito bem!

:)

por Talita Azevedo
| 221.8k xp | 182 posts
Moderador

obg ajudou muito seu feedback.

\0/

por André Gustavo dos Santos Rodrigues
| 194.9k xp | 25 posts

Boa noite, o topico ja foi marcado como solucionado mas to colando do jeito que eu fiz, no lugar de dois triangulos faz logo um losango.

<canvas width="600" height="400"></canvas>
<script type="text/javascript">
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'darkgreen';
    pincel.fillRect(0,0, 600, 400);

    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(300,20);
    pincel.lineTo(20,200);
    pincel.lineTo(300,380);
    pincel.lineTo(580, 200)
    pincel.fill();

    pincel.fillStyle = 'blue';
    pincel.beginPath();
    pincel.arc(300,200,140, 0, 2*3.14);

    pincel.fill();

</script>