Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Solução desenhaFlor

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Uma inofensiva flor...

por Aline Beltrão De Oliveira
| 49k xp | 9 posts
<body>
    <canvas width="600" height="400"></canvas>
    <script>
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.fillStyle = 'lightgray';
        pincel.fillRect(0, 0, 600, 400);

        function desenhaCirculo(x, y, raio, cor) {

            pincel.fillStyle = cor;
            pincel.beginPath();
            pincel.arc(x, y, raio, 0, 2*3.14);
            pincel.fill();
         }

        desenhaCirculo(300, 200, 50,'red')
        desenhaCirculo(400, 200, 50,'black')
        desenhaCirculo(200, 200, 50,'orange') 
        desenhaCirculo(300, 100, 50,'yellow')  
        desenhaCirculo(300, 300, 50,'blue')     

    </script>

</body>
2 respostas
por Aline Beltrão De Oliveira
| 49k xp | 9 posts

Depois vi que as bolinhas ficaram um pouco grandes, mas tudo bem

flor desenhada com círculos: circulo vermelho ao centro, preto à direita, laranja à esquerda, amarelo acima e azul abaixo

solução!
por Pedro Henrique Durand Reis
| 82.5k xp | 51 posts

Eu fiz com os tamanhos recomendados e botei a cor do Flamengo

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

    <script>

        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.fillStyle = 'lightgray';
        pincel.fillRect(0, 0, 600, 400);

        function desenhaCirculo(x, y, raio, cor) {

            pincel.fillStyle = cor;
            pincel.beginPath();
            pincel.arc(x, y, raio, 0, 2*3.14);
            pincel.fill();
        }

        desenhaCirculo (300, 200, 10, "black")
        desenhaCirculo (320, 200, 10, "red")
        desenhaCirculo (280, 200, 10, "black")
        desenhaCirculo (300, 220, 10, "red")
        desenhaCirculo (300, 180, 10, "black")

    </script>

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