Entrar Ainda não tem acesso?
1
resposta

Bandeira do Brasil - Fiz desta forma, sem consulta. Com essas dimensões está certo também?

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 Bianca Estefani Machado de Araújo
| 16.4k xp | 4 posts
<canvas width="600" height="400"></canvas>

<script>

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

    pincel.fillStyle = 'green';
    pincel.fillRect(0,0,300,200);

    pincel.fillStyle = 'yellow';
    pincel.beginPath();    
    pincel.moveTo(150, 20);
    pincel.lineTo(280, 100);    
    pincel.lineTo(20, 100);
    pincel.fill();

    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.lineTo(20, 100);
    pincel.lineTo(150, 180);
    pincel.lineTo(280, 100);
    pincel.fill();

    pincel.fillStyle = 'darkblue';
    pincel.beginPath();
    pincel.arc(150, 100, 50, 0, 2*3.14);
    pincel.fill();


</script>
1 resposta
por Marcus Vinícius Da Silva E Silva
| 50.4k xp | 8 posts

Sim, fiz desta forma um pouco diferente, ao invés de dois triângulos, fiz um só com 4 "lineTo"

<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(50, 200);
    pincel.lineTo(300, 350);
    pincel.lineTo(550, 200);
    pincel.fill();

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

    pincel.fill();



</script>