Entrar Ainda não tem acesso?
2
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 Natalia Alexandre Hayakawa Martineli
| 76.7k xp | 4 posts
desenvolvedora front-end júnior

Olá, essa foi minha tentativa de bandeira

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

</canvas>

<script>

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

    pincel.fillStyle = "green";
    pincel.fillRect(50, 50, 500, 300)

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

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

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

</script>
2 respostas
por LEONARDO DE ARAUJO ALVES
| 106.8k xp | 4 posts

Olá boa tarde! a sua bandeira ficou muito boa parabéns!!! Gostaria de sugerir algo. que no caso seria comentar o código para facilitar mais a compreensão dele caso seja preciso modificá lo mais tarde . Por exemplo

por DAVENIR RAMOS
| 31.4k xp | 8 posts
<!---bandeira-Brasil--->
<canvas width='600' height='400'></canvas>
<script>

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

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

//losango
    pincel.fillStyle ='yellow';
    pincel.beginPath();
    pincel.moveTo(300,30);
    pincel.lineTo(30,200);
    pincel.lineTo(300,370);
    pincel.lineTo(570,200);
    pincel.fill();
//circulo
    pincel.fillStyle ='darkblue';
    pincel.beginPath();
    pincel.arc(300,200,100,0,2*3.14);
    pincel.fill();
</script>