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

Resposta com código comentado - Desenha várias flores para atender resposta do usuário

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 Rosemeire das Graças Argentini Deconti
| 127k xp | 68 posts
Empreendedora 
<!-- 
    Projeto Labora/Alura/Oracle ONE
    Curso Alura: Lógica de Programação II
    Aluna: Rosemeire Deconti
    Módulo: Desenhando gráficos com Canvas
    Exercício: Desenhando flor
    Data: 29/10/2020
-->

<!-- Corrige acentuação para América Latina --> 
<meta charset="UTF-8">

<!-- Exibe títulos na página WEB --> 
<h1>Projeto Oracle ONE - Labora e Alura</h1>
<h2>Desenhar flores na página WEB</h2>

<!-- Definir com CANVAS a área onde vamos desenhar -->
<canvas width="1200" height="2400"></canvas>

<!-- Desenhar -->
<script>

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

    <!-- Desenhar petálas da flor -->
    function desenhaCirculo(x, y, raio, cor) {

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

    <!-- Desenhar flor 1 com cores diferentes da flor 2 -->
    function desenhaFlor1(x, y) {

        desenhaCirculo(x, y+20, 10, 'blue');
        desenhaCirculo(x, y, 10, 'red');
        desenhaCirculo(x, y-20, 10, 'yellow');
        desenhaCirculo(x-20, y, 10, 'orange');
        desenhaCirculo(x+20, y, 10, 'black');
    }

    <!-- Desenhar flor 2 com cores diferentes da flor 1 -->
    function desenhaFlor2(x, y) {

        desenhaCirculo(x, y+20, 10, 'pink');
        desenhaCirculo(x, y, 10, 'gray');
        desenhaCirculo(x, y-20, 10, 'green');
        desenhaCirculo(x-20, y, 10, 'blue');
        desenhaCirculo(x+20, y, 10, 'brown');
    }

    <!-- Inicializa posicao e flor -->
    var posicaoFlor = 100;
    var qualFlor = 1;

    <!-- Obtém quantidade de flores para desenhar entre 1 / 10 -->
    while (true){

        var floresDesejadas = parseInt(prompt("Quantas flores você quer desenhar? (entre 1 até 10)"));

        if (floresDesejadas >=1 && floresDesejadas <=10) {

            break;

        }

    }

   <!-- Desenha as flores alternando entre Flor 1 / Flor 2 -->    
    for (contaFlores=1; contaFlores <= floresDesejadas; contaFlores++) {

        if (posicaoFlor <= 1100) {

            if (qualFlor == 1) {

                desenhaFlor1 (posicaoFlor, posicaoFlor);
                qualFlor = 2;

            } else {

                desenhaFlor2 (posicaoFlor, posicaoFlor);
                qualFlor = 1;

            }

            posicaoFlor = posicaoFlor+50;   

        }

    }


</script>
2 respostas
solução!
por Akashi
| 220.4k xp | 284 posts

Rosemeire, você identifica bem os comentários. Ajuda a entender.

Vi que o código repete algumas coisas parecidas, e juntei pra sintetizar. Ficou só uma function que alterna as cores das flores.

<meta charset="UTF-8">

<canvas width="1200" height="2400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 1200, 2400);
    var cores = ["blue", "red", "yellow", "orange", "black", "pink", "gray", "green", "blue", "brown"];

    <!-- Desenhar petálas da flor -->
    function desenhaCirculo(x, y, raio, cor) {

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


    <!-- Desenhar flor alternando cores da flor -->
    function desenhaFlor(x, y) {

        if(contaFlores % 2 != 0) {      //se a flor for ímpar, começa com a cor blue.
            i = 0;
        } else {                        //se a flor for par, começa com a cor pink.
            i = 5;
        }
        desenhaCirculo(x, y+20, 10, cores[i + 0]);
        desenhaCirculo(x, y, 10, cores[i + 1]);
        desenhaCirculo(x, y-20, 10, cores[i + 2]);
        desenhaCirculo(x-20, y, 10, cores[i + 3]);
        desenhaCirculo(x+20, y, 10, cores[i + 4]);
    }


    <!-- Inicializa posicao -->
    var posicaoFlor = 100;

    <!-- Obtém quantidade de flores para desenhar entre 1 / 10 -->
    while (true){

        var floresDesejadas = parseInt(prompt("Quantas flores você quer desenhar? (entre 1 até 10)"));

        if (floresDesejadas >=1 && floresDesejadas <=10) {

            break;
        }
    }

   <!-- Desenha as flores solicitadas -->    
    for (contaFlores = 1; contaFlores <= floresDesejadas; contaFlores = contaFlores + 1)   {

        desenhaFlor (posicaoFlor, posicaoFlor);
        posicaoFlor = posicaoFlor + 50;
    }

</script>
por Rosemeire das Graças Argentini Deconti
| 127k xp | 68 posts
Empreendedora

Ficou ótimo! Muito grata pela sugestão!