1
resposta

bug

Gente, tentei mudar a cor ao clicar, nao sei o que foi que eu fiz, mas só consigo desenhar no segundo clique e sai a cor vermelha. Será um bug feito por mim mesma ?

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var desenha = false;
    var indice = 0; 

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

    function desenhaCirculo(evento) {

        if (desenha) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores;
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();

    }
    return false; 

        console.log(x + ',' + y);
    }

    function iniciarDesenho () { 
        desenha = true;
    }

    function encerraDesenho () {
        desenha = false; 
    }

   function mudaCor() { 

        indice++;

        if(indice=0){
            cores='blue';
        }
        if(indice=1){
            cores='green';
        }
        if(indice=2){
            cores='red';
        }

        return false;

    }

    tela.onclick = desenhaCirculo ;
    tela.onmousedown = iniciarDesenho ; 
    tela.onmouseup = encerraDesenho ; 
    tela.onmousemove = desenhaCirculo ;
    tela.oncontextmenu = mudaCor ;  

</script>     
1 resposta

Oiii Anne, como você está?

Sinto muito pela demora em obter um retorno.

Isso está acontecendo por alguns motivos:

  • Para comparar valores devemos utilizar dois sinais do operador de igualdade (=). Na condição if de seu código há apenas um sinal de igual. Veja como está:
if (indice = 0) {
    cores = 'blue';
}
if (indice = 1) {
    cores = 'green';
}
if (indice = 2) {
    cores = 'red';
}

O correto seria:

if (indice == 0) {
    cores = 'blue';
}
if (indice == 1) {
    cores = 'green';
}
if (indice == 2) {
    cores = 'red';
}
  • Ainda na função mudaCor() devemos tomar cuidado com a posição onde está sendo incrementado o índice. Pois, caso seja incrementado antes da verificação, nunca entrará no valor 0, já que antes da comparação o mesmo será incrementado, resultando assim o valor 1.

  • Também é preciso resetar o índice ao chegar no valor 2, pois dessa forma as cores irão de: azul, verde, vermelho e em seguida retornará para o valor inicial que é o azul, em seguida verde e assim por diante:

if (indice != 2) {
    indice++;
} else {
    indice = 0;
}

Veja como fica o código completo com as modificações:

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var desenha = false;
    var indice = 0; 
    var cores = "white";

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

    function desenhaCirculo(evento) {

        if (desenha) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores;
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();

    }
    return false; 

        console.log(x + ',' + y);
    }

    function iniciarDesenho () { 
        desenha = true;
    }

    function encerraDesenho () {
        desenha = false; 
    }

   function mudaCor() { 

        if(indice==0){
            cores='blue';
        }
        if(indice==1){
            cores='green';
        }
        if(indice==2){
            cores='red';
        }

        if(indice!=2){
            indice++;
        }else{
            indice = 0;
        }

        return false;

    }

    tela.onclick = desenhaCirculo ;
    tela.onmousedown = iniciarDesenho ; 
    tela.onmouseup = encerraDesenho ; 
    tela.onmousemove = desenhaCirculo ;
    tela.oncontextmenu = mudaCor ;  

</script>     

Abaixo um gif de demonstração do código acima, onde a cor inicialmente é branca e posteriormente irá se alternar entre azul, verde e vermelho:

Demonstração de cores sendo alternadas

Qualquer dúvida estou por aqui, tá bom?

Grande abraço!