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

Melhorando o código

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 Bernardo Chies karling
| 111k xp | 29 posts

Olá, Teria como alcançar o mesmo resultado das cores, sem usar tantos "if" mesmo utilizando "for" ou "while" no código? Ou talvez alguma mudança nesse mesmo código tirando linhas desnecessárias.

<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();
    }

for(var x=200;x<500;x=x+100){
    var cor="orange";
    var tamanho = 50;
    var y=200; 

if(x==400){
        cor="black";
    } 

    desenhaCirculo(x,y,tamanho,cor);

    if(x==300){
        for(y=100;y<400;y=y+100){
            cor="yellow";

            if(y==200){
                cor="red";
            }
            if(y==300){
                cor="blue";
            }
            desenhaCirculo(x,y,tamanho,cor);
        }
    }   
}

</script>

Edit: Creio que uma ideia seja formar 3 arrays, com as medidas "x", "y" e as cores, e deixar as coordenadas referenciadas em um ponto.

3 respostas
solução!
por Cássio Murilo
| 1276.4k xp | 2204 posts
Instrutor Agile Master

Fala, Bernardo! Tudo bem contigo?

Desculpe a demora em dar um retorno!

Nós podemos criar uma função para fazer a flor e dentro dessa função chamar a outra função que desenha o círculo

    function desenhaFlor(x, y, cor) {
        var flor = desenhaCirculo(x, y, raio, cor);
        return flor;
    }

Coloquei os parâmetros que desejo desenvolver e a função que desenha o círculo, guardei dentro de uma variável local e por fim, retorno esse círculo.

Para criar os círculos posso chamar essa função e desenhar onde quiser especificando a posição X, Y e a cor.

    desenhaFlor(300, 200, "black");
    desenhaFlor(300, 300, "green");
    desenhaFlor(200, 200, "orange");
    desenhaFlor(300, 100, "yellow");
    desenhaFlor(400, 200, "red");

O código completo ficará dessa forma

<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();
    }

    var raio = 50;

    function desenhaFlor(x, y, cor) {
        var flor = desenhaCirculo(x, y, raio, cor);
        return flor;
    }

    desenhaFlor(300, 200, "black");
    desenhaFlor(300, 300, "green");
    desenhaFlor(200, 200, "orange");
    desenhaFlor(300, 100, "yellow");
    desenhaFlor(400, 200, "red");

</script>

Essa é uma outra opção!!!

Caso desenvolva algo em cima, Bernardo, mostre para nós depois!!! =D

Um abraço e até breve!

por Bernardo Chies karling
| 111k xp | 29 posts

Obrigado pela ajuda

por EVANDRO JOSE SOARES
| 67.4k xp | 82 posts

A função desenhaFlor explicado por Cássio Murilo, está correta, mas quando alteramos o valor do raio de 50 para outro valor, exemplo raio = 15, verificamos que os outros parâmetros x e y, também há necessidade de serem calculados, para que possamos obter a flor em questão. Então deixo código abaixo para que possa melhorar essa questão de cálculo.

<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();
    }

    function desenhaFlor (xc, yc, raioc, cor1, cor2, cor3,cor4,cor5) {
        desenhaCirculo(xc, yc, raioc, cor1);
        desenhaCirculo(xc+raioc*2,yc,raioc, cor2);
        desenhaCirculo(xc-raioc*2,yc,raioc, cor3);
        desenhaCirculo(xc,yc+raioc*2, raioc, cor4);
        desenhaCirculo(xc,yc-raioc*2,raioc, cor5);
    }

    desenhaFlor(300, 200, 15, "red", "black", "orange", "blue", "yellow");

</script>

Espero ter contribuído.