2
respostas

Por que minha "lógica" não funciona?

Eu tentei implementar meu código para trocar as cores da bolinha mas não funcionou. Apesar de acreditar que meu modus operandi de pensar esteja de fato errado, no entanto, eu não entendo o porquê. Eu gostaria que alguém pudesse me esclarecer para eu conseguir prosseguir com mais segurança no estudo.

Segui meu código?


function mudaCor() {

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

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

    var mudarCor = 0;

        if(mudarCor <= cores.length{
            mudarCor = 0;
            mudarCor++;



        }
        return false;    



}


    tela.oncontextmenu = mudaCor;
2 respostas

Você colocou as duas funções em uma só? Talvez isso esteja travando o seu código. Acho que nesse momento vale a pena dividir as duas.

Além disso, evento é parâmetro da função, você precisaria colocá-lo nos parênteses.

Acho que você não colou o seu código todo né? Mas se tiver colado, ainda estaria faltando a variável tela.

Ainda, está faltando um parênteses no seu if. E acredito que esse if da forma como você fez vai gerar um loop infinito, pois sempre a variável mudaCor vai receber zero, já que você utilizou o sinal de menor, ou seja, começa no zero, ela vai ser menor cores.length, então vai receber zero e acrescentar 1. Novamente seguirá sendo menor que cores.length, então, novamente, recebe zero e acrescenta 1 e isso seguirá para sempre.

olá, debora. sei que é um pouco tarde, mas fiz uma alteração no seu código. inicialmente, estava faltando um parênteses no seu if () e a estrutura do código também estava diferente do que deveria. principalmente o posicionamento do seu contado e do array criado. segue abaixo o seu código com algumas alterações. deve funcionar agora. espero ter ajudado.

<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 mudarCor = 0;

function desenhaCirculo(evento){

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

function mudaCor() {  

    mudarCor++;

    if( mudarCor >= cores.length ){
        mudarCor = 0;

    }
    return false;    

}
tela.oncontextmenu = mudaCor;
</script>