Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

mudar cor de bolinha

Na aula 3 exercício quatro não muda a cor conforme

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

  function desenhaCirculo(evento) {

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


    }

    tela.onclick = desenhaCirculo;

    function mudaCor() {

      alert('Funcionou!');
      return false;

     }

    tela.oncontextmenu = mudaCor;     
</script>

solicitado

4 respostas

Olá Aline!

Sua variável indeceCorAtual inicia com zero, a sua função mudaCor() tem que incrementar a variável indiceCorAtual e quando essa variável for igual ao tamanho do array de cores inicializá-la com zero novamente. Segue o código abaixo:

    function mudaCor() {

      indiceCorAtual++;

      if (indiceCorAtual == cores.length) {
          indiceCorAtual = 0;
      }
      return false;

    }

Até mais, qualquer dúvida comente aqui.

solução!

Olá! Fiz os ajustes, mas continua sem trocar a cor.

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

  function desenhaCirculo(evento) {

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


    }

    tela.onclick = desenhaCirculo;

    function mudaCor() {
    indiceCorAtual++;
    if(indiceCorAtual == cores.length) {
       indiceCorAtual = 0;
       }

      return false;

     }

    tela.oncontextmenu = mudaCor;     
</script>

Olá, Aline.

Fiz o teste do código aqui e está funcionando.

Para mudar a cor você tem que clicar com o botão esquerdo do mouse. No seu caso mesmo clicando com o botão esquerdo não está mudando a cor?

Att

Agora deu certo. Obrigada!