Queria mostrar minha Bandeira | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

2
respostas

por Laissa Paloma Queiroz de Lima

| 40.1k xp | 5 posts

Oi, Pessoal! Queria mostrar meu exercício. Sei que é pouco, mas incrementei a faixa branca... ficou retinha. Alguém sabe fazer ela curvada??

Beijos e obrigada!

<!-- bandeira-brasil.html -->

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

    pincel.fillStyle = 'white';
    pincel.fillRect(200, 190, 200, 20);

</script>

2 respostas

por Pedro Egerland

| 152.8k xp | 12 posts

10/02/2021

Bom dia Paloma, veja se é isso que você deseja.

html

<canvas id="canvas" width="200" height="200"></canvas>

javascript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.ellipse(100, 100, 75, 75, Math.PI /2, 0,16 * Math.PI);
ctx.stroke();

por Laissa Paloma Queiroz de Lima

| 40.1k xp | 5 posts

13/02/2021

Oi, Pedro. Não consegui inserir com o código que você enviou, mas obrigada por responder! Gosto de desafios. um abraço