Entrar Ainda não tem acesso?
1
resposta

Bandeira do 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 Victor Ramon Firmo Moreira
| 93.4k xp | 41 posts
<meta charset="UTF-8">

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

        pincel.fillStyle = 'yellow';
        pincel.beginPath();

        pincel.moveTo(300, 10);
        pincel.lineTo(590, 200);
        pincel.lineTo(300, 390);
        pincel.lineTo(10, 200);

        pincel.fill();

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

    </script>
</body>

Resultado:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
por Eduardo De Luna Freire Bueno
| 139.8k xp | 26 posts

Boa tarde, Victor!

Quando fiz a minha bandeira eu calculei com a metade do valor 600x400 e ficou igual a sua.

Depois eu fui diminuindo os eixos e consegui deixar um espaço maior nas pontas do triangulo.

resultado de como ficou minha bandeira

Se interessar, segue o código com os eixos que calculei:

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

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

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

//triangulo 2
pincel.fillStyle = "yellow";
pincel.moveTo (50,200);
pincel.lineTo (300,370);
pincel.lineTo (550,200);
pincel.fill();

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

</script>

bons estudos, victor! :)