Entrar Ainda não tem acesso?
2
respostas

Estou no caminho certo ?

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 Diego Dias Marques
| 214.7k xp | 168 posts

Travei aqui, deu tudo certo, consegui trocar a cor, de azul pra vermelho e de vermelho pra verde mas agora não tá mudando pra azul, ai acho que entraria a necessidade de um laço, mas não to conseguindo fazer, porque quando eu executo aquele trecho do for dentro da função dá problema ? Não quero a resposta, quero só um caminho.

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

<script>
    var cores = ['blue', 'red', 'green'];
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores[0];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);
    }

    tela.onclick = desenhaCirculo;

    function mudaCor() {

        var aux = 0;
        var aux2 = 0;
        cores[0] = cores[1];
        aux = cores[0];
        cores[1] = cores[2];
        aux2 = cores[1];
        return false;

      }


    tela.oncontextmenu = mudaCor;


 /*  for (var i = 0; i < cores.length; i++) {
            var aux = 0;
            cores[i] = cores[i + 1];
            aux = cores[i];
            cores[i + 1] = cores[i + 2];
            return false;

        }
*/

</script>
2 respostas
por Otávio Prado
| 4791.8k xp | 9225 posts

Olá Vinicius, tudo bem? Você está indo bem, apenas uma dica: as cores devem mudar de acordo com os clicks do botão direito do mouse do usuário, correto? Sendo assim, toda vez que houver um click, vamos precisar alterar a cor. A lógica que você está tentando elaborar não precisa de um laço for, visto que vamos alterar a cor quando o evento click ocorrer.

por Diego Dias Marques
| 214.7k xp | 168 posts

Dá uma olhada, ficou bom ? No que eu podia ter melhorado ? Ainda não entendi o return false, e o que o return faz pra tirar aquele menu de opções padrão do canvas.

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

<script>
    var cores = ['blue', 'red', 'green'];
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores[0];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);
    }

    tela.onclick = desenhaCirculo;

    function mudaCor() {

        var aux = 0;
        var aux2 = 0;

        aux = cores[0]; /*aux = azul*/
        cores[0] = cores[1]; /*cores[0] = red*/

        cores[1] = cores[2]; /*cores[1] = verde*/
        aux2 = cores[1];
        cores[2] = aux;
        return false;


      }


        tela.oncontextmenu = mudaCor; /*clique com o botão direito do mouse*/




</script>