Entrar Ainda não tem acesso?
2
respostas

MINHA NOVA FLORZINHA

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 Izabele Soares
| 31.3k xp | 49 posts
ASSISTENTE ADMINISTRATIVO 
<canvas width="600" height="400"></canvas>

<script>

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

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

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

    pincel.fillStyle = "lightblue"
    pincel.fillRect(0,0,600,400)


    desenhaCirculo(300,100,50,"yellow"); //Pétala de cima;
    desenhaCirculo(370,270,50,"yellow");

    desenhaCirculo(200,200,50,"yellow"); //Pétala esqueda;
    desenhaCirculo(230,130,50,"yellow");


    desenhaCirculo(300,300,50,"yellow"); //Pétala de baixo;
    desenhaCirculo(230,270,50,"yellow"); 


    desenhaCirculo(400,200,50,"yellow"); //Pétala direita;
    desenhaCirculo(370,130,50,"yellow"); 


    desenhaCirculo(300,200,60,"brown");



</script>
2 respostas
por Izabele Soares
| 31.3k xp | 49 posts
ASSISTENTE ADMINISTRATIVO

Fixação de aprendizado: 

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

<script>

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

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

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

    pincel.fillStyle = "lightblue"
    pincel.fillRect(0,0,600,400)


    function desenhaFlor(x,y) {

        desenhaCirculo(x, y + 100,50,"yellow"); //Pétala de baixo;
        desenhaCirculo(x, y - 100,50,"yellow"); //Pétala de cima;
        desenhaCirculo(x - 100, y,50,"yellow"); //Pétala esquerda;
        desenhaCirculo(x + 100, y,50,"yellow"); //Pétala direita;

        desenhaCirculo((x + 70), (y - 70),50, "yellow"); //Direita cima
        desenhaCirculo((x + 70), (y + 70),50, "yellow"); //Direita baixo
        desenhaCirculo((x - 70), (y - 70), 50, "yellow"); //Esqueda cima
        desenhaCirculo((x - 70), (y + 70), 50, "yellow"); //Esquerda baixo


        desenhaCirculo(x,y,60,"brown");

    }

     var x = 150
     while(x > 0 && x < 600){
         desenhaFlor(x,200)
         x = x + 300    
     }



</script>
por Jean Carlo Sbalchiero
| 761k xp | 648 posts
Desenvolvedor Web Fullstack

Boa Izabele Soares,

Gostei da solução que você propôs, afinal o resultado é o mesmo porém o código me parece muito mais robusto.

Para que mais pessoas consigam visualizar a sua solução proposta é recomendável com que você venha estar marcando este tópico como solucionado, assim pode estar ajudando ainda mais pessoas :)

Obrigado!!