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

Minha solução :)

To começando a entender os arrays <3

<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 i = 0


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

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


tela.onclick = desenhaCirculo;

function mudaCor() {
    i++
    return false;
}

tela.oncontextmenu = mudaCor;



</script>
7 respostas

Olá, Diego! Nenhum código está sendo exibido em seu post.

Para simbolizar que seu texto é um trecho de código, você deve apertar TAB no começo de uma linha, ou digitar 4 espaços em branco, e desta maneira, o texto ficará na cor marrom claro.

Agora foi <3

Bacana, Diego!

Seu código está funcionando certinho!

As únicas possíveis correções que eu consigo enxergar aqui são que você pode tirar o parâmetro cor da função desenhaCirculo(evento, cor), pois você já está definindo a variável cor dentro da própria função.

Ficaria assim:

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

E você também definiu o array cores duas vezes, podendo apagar a segunda definição.

No mais, está muito bom!

Continue firme em seus estudos!

Bacana, eu fiz umas tentativas e não consegui, não considerei utilizar a função desenhaCirculo.

Ainda não vi a solução do professor, enquanto isso me apropriei da sua, e estou tentando fazer reiniciar para azul, mas não estou conseguindo. Imagino que dê pra fazer mais ou menos assim, não entendi onde está o erro aqui:

function mudaCor() {

if (i >= cores.length){
i == 0;
} else {
i++}

console.log(i);
return false;
}

Não é necessario uso do else, fiz meio que tentando corrigir codigo fazendo de algumas formas, e funcionou assim. nao sei se responde sua duvida mas espero que ajude. ;D

function mudaCor() {

        i++

        if (i >= cores.length) {

            i = 0;

        }

    console.log(i);
    return false;

    }
solução!

Identifiquei o erro de consegui concluir. Sim, realmente não precisa, fica mais limpo sem o else. Porém acredito que deveria funcionar com o else. O que eu queria entender é o motivo de ocorrer i = 3 nesse codigo. cores.length é 2.

function mudaCor() {


if (i == cores.length){
i = 0;
} else {
i++;
}

console.log(i);
return false;
}