1
resposta

Flor de círculos com flores de círculos nas pétalas

Fiz uma flor de círculos com flores de círculos. Analisando as respostas no fórum, encontrei uma interessante que automatiza o preenchimento das variáveis apenas com as coordenadas iniciais, mas em razão de manter as cores estáticas - e eu não saber (ainda) automatizar essa mudança sem recorrer a um input a cada desenho -, preferi fazer o trabalho de formiguinha, desenhando círculo por círculo. Se tiverem alguma ideia pra mudar as cores das pétalas automaticamente, estou todo ouvidos (e olhos).

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

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

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

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


    }

    desenharCirculo(300,200,50,"red");
    desenharCirculo(200,200,50,"orange");
    desenharCirculo(400,200,50,"black");
    desenharCirculo(300,100,50,"yellow");
    desenharCirculo(300,300,50,"blue");

    //circulo central
    desenharCirculo(300,200,20,"black");
    desenharCirculo(280,200,20,"yellow");
    desenharCirculo(320,200,20,"blue");
    desenharCirculo(300,220,20,"red");
    desenharCirculo(300,180,20,"orange");

    //circulo da esquerda
    desenharCirculo(200,200,20,"black");
    desenharCirculo(180,200,20,"yellow");
    desenharCirculo(220,200,20,"blue");
    desenharCirculo(200,220,20,"red");
    desenharCirculo(200,180,20,"orange");

    //circulo da direita
    desenharCirculo(400,200,20,"black");
    desenharCirculo(380,200,20,"yellow");
    desenharCirculo(420,200,20,"blue");
    desenharCirculo(400,220,20,"red");
    desenharCirculo(400,180,20,"orange");

    //circulo de cima
    desenharCirculo(300,100,20,"black");
    desenharCirculo(280,100,20,"yellow");
    desenharCirculo(320,100,20,"blue");
    desenharCirculo(300,120,20,"red");
    desenharCirculo(300,80,20,"orange");

    //circulo de baixo
    desenharCirculo(300,300,20,"black");
    desenharCirculo(280,300,20,"yellow");
    desenharCirculo(320,300,20,"blue");
    desenharCirculo(300,320,20,"red");
    desenharCirculo(300,280,20,"orange");
</script>
1 resposta

Fala, Lucas! Tudo bem por aí?

Mandou bem demais, parabéns pelo empenho em utilizar os conceitos abordados nas aulas.

Sua solução ficou muito bacana.

Continue praticando, e caso tenha alguma dúvida, não deixe de compartilhar com a gente.

Bons estudos e até mais!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software