1
resposta

Meu codigo nao troca a cor!!

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;
    var cor = ["red", "blue", "pink"];
    var posicaoCor = 0;
    pincel.fillStyle = cor [posicaoCor]
    pincel.beginPath();
    pincel.arc(x, y, 10, 0, 2 * 3.14);
    pincel.fill()
    console.log(x + ","
        +y);



}
tela.onclick = desenhaCirculo;

function mudaCor(){
    if (posicaoCor >= cor.length) {
        posicaoCor = 0;
    } else {
        posicaoCor++;
    }



    return false
}


tela.oncontextmenu = mudaCor;
1 resposta

Olá Eric, tudo bem?

O problema está na função mudaCor(). A variável posicaoCor não está definida dentro da função, então o código não sabe qual é o valor atual de posicaoCor para poder incrementá-la ou reiniciá-la. Para resolver isso, você pode declarar a variável posicaoCor fora da função desenhaCirculo e dentro da função mudaCor.

Além disso, a função mudaCor() está retornando false, mas não é necessário nesse caso. Você pode remover essa linha.

Segue abaixo o código corrigido:

var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var posicaoCor = 0;
var cor = ["red", "blue", "pink"];

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 = cor[posicaoCor]
    pincel.beginPath();
    pincel.arc(x, y, 10, 0, 2 * 3.14);
    pincel.fill()
    console.log(x + "," + y);
}

tela.onclick = desenhaCirculo;

function mudaCor(){
    if (posicaoCor >= cor.length - 1) {
        posicaoCor = 0;
    } else {
        posicaoCor++;
    }
}

tela.oncontextmenu = mudaCor;

Espero ter ajudado e bons estudos!