2
respostas

Descobrindo da maneira mais difícil

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 Marcelo Wieczorek Machado
| 75.7k xp | 26 posts

Tentei de uma forma "mais dificultosa" única e exclusivamente por não lembrar do comando variável.length hahahaha!

O importante é que deu certo essa forma "alternativa" e que agora lembrarei para os próximos:

<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"];

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

    }

    function mudaCor() {

        var corInicial = cores[0]
        pincel.fillStyle = cores[0];
        cores[0] = cores[1];
        cores[1] = cores[2];
        cores[2] = corInicial;

        console.log(pincel.fillStyle);    
        return false;

    }

    tela.onclick = desenhaCirculo;
    tela.oncontextmenu = mudaCor;


</script>
2 respostas
por Igor Augusto Corso Borgio
| 71.6k xp | 31 posts

Mto bom mano, solucionou o problema kkk, depois de umas horas quebrando a cabeça eu fiz assim:

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

    function desenhaCirculo(evento, cores) {

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

        pincel.fillStyle = corAtual;
        pincel.beginPath();
        if(evento.shiftKey){
            pincel.arc(x, y, 20, 0, 2 * 3.14);
            pincel.fill();
        } 
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);

    }

    tela.oncontextmenu = alteraCores
    tela.onclick = desenhaCirculo

    var i = 1
    var corAtual = 'blue'

    function alteraCores(){

        var cores = ['blue', 'red', 'green']
        if(i < cores.length){
            alert("cor alterada para: " + cores[i])
            corAtual = cores[i]
            i++
            return false
        } else { 
            i = 0
            alteraCores()
            return false
        }
    }



</script>
por Igor Augusto Corso Borgio
| 71.6k xp | 31 posts

Você falou do Length, dava pra ter usado tipo um i < 3 (tamanho do vetor)