Entrar Ainda não tem acesso?
3
respostas

Explicação quanto a mudança de cor.

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Interagindo com o usuário e atividade Trocando de cor

por José Áureo Santos Leite Júnior
| 61.9k xp | 3 posts

Prezados(as), eu não consegui fazer sozinho o código, mas consegui finalizar o exercício, mas continuo tento dúvida como funciona a "function mudaCor". Alguém poderia me explicar detalhadamente como funciona? Como está sendo adicionado e como retorna a cor azul, de uma forma mais detalhada. 

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

<script>

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

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    var cores = ['blue', 'red', 'green'];
    var indiceCorAtual = 0;

    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        pincel.fillStyle = cores[indiceCorAtual];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);

    }

tela.onclick = desenhaCirculo;

    function mudaCor() {

        indiceCorAtual++;

        if(indiceCorAtual >= cores.length) {
            indiceCorAtual = 0; // volta para a cor Azul.
        }
        return false; // Para não exibir o menu padrão do canvas.
    }

tela.oncontextmenu = mudaCor;

</script>
3 respostas
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Vamos lá!!!

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

function mudaCor() {

    indiceCorAtual++;

    if(indiceCorAtual >= cores.length) {
        indiceCorAtual = 0; // volta para a cor Azul.
    }
    return false; // Para não exibir o menu padrão do canvas.
}

lá encima tem um vetor com as cores

var cores = ['blue', 'red', 'green'];

quando você chama a função mudaCor você incrementa o indiceCorAtual que muda a cor .

Dá um ligue https://codepen.io/anon/pen/BGNRbb

por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi José Áureo observe que tudo se inicia aqui:

var cores = ['blue', 'red', 'green'];
    var indiceCorAtual = 0;

Na declaração do array esse array é um array de cores e como todo array, ele tem um índice esse índice inicia com 0, logo:

cores[0]='blue'; cores[1]='red'; cores[2]='green';

Essa variável que declaramos logo abaixo chamada indiceCorAtual tem como objetivo definir a corAtual como já diz seu proprio nome e ela inicia com 0, ou seja, inicia com a cor 'blue'. Se você observar quando executamos o programa a cor da primeira bolinha que desenhamos é azul, justamente pq definimos pra comecar com essa cor.

Toda vez que você clica no canvas com o botão esquerdo uma bolinha é desenhada por causa dessa linha:

tela.onclick = desenhaCirculo;

Só que não queremos desenhar só com a bolinha azul temos outras cores também, por isso definimos no código na linha abaixo que toda vez que clicarmos com o botão direito do mouse queremos mudar de cor:

tela.oncontextmenu = mudaCor;

Esssa mudança ocorre nessa função mudaCor que é chamada e pega aquela variável que define nossa corAtual e incrementa ela ou seja aumenta mais um no valor dela, ora se ela valia 0 agora ela vai valer 1, o que significa que não vou ter mais a cor azul e sim a 'red' conforme postei acima sobre os índices.Mas além disso nosso vetor cores só tem 3 cores com índices de [0 a 2], SE a cada clique incrementarmos 1 vai chegar uma hora que o valor da variável será 3 o que não representa nenhuma cor do nosso vetor, por isso temos esse if:

if(indiceCorAtual >= cores.length) {
            indiceCorAtual = 0; // volta para a cor Azul.
        }

Pra toda vez que a corAtual ultrapassar ou igualar o tamanho do meu array de cores eu zero ele e faço ele iniciar do começo, ou seja do 0, do azul, do 'blue' e fico nesse loop. Como voc~e bem comentou no código.

BOm é isso , espero ter ajudado e bons estudos.