Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Fiz e funcionou, pode ser assim?

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 Francis Augusto Justino Da Silva
| 28.7k xp | 6 posts
<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);

    var raio = (15, 0, 2*3.14);
    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, 15, 0, 2*3.14);
        pincel.fill();
    }
        desenhaCirculo(300, 200, raio,'red')
        desenhaCirculo(300, 230, raio,'blue')
        desenhaCirculo(270, 200, raio,'orange')
        desenhaCirculo(300, 170, raio,'yellow')
        desenhaCirculo(330, 200, raio,'black')
</script>
1 resposta
solução!
por Francis Augusto Justino Da Silva
| 28.7k xp | 6 posts

// Corrigi alguns erros e acrescentei uma nova function para criar varias flores

<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, 15, 0, 2*3.14);
        pincel.fill();
    }
    function desenhaFlor(x, y) {

        desenhaCirculo(x, y+30, 15, 'blue');
        desenhaCirculo(x, y, 15, 'red');
        desenhaCirculo(x, y-30, 15, 'yellow');
        desenhaCirculo(x-30, y, 15, 'orange');
        desenhaCirculo(x+30, y, 15, 'black');

    }    

        desenhaFlor(300, 200);
        desenhaFlor(200, 200);
        desenhaFlor(100, 200);
        desenhaFlor(400, 200);
        desenhaFlor(500, 200);

</script>