Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Sim, aparentemente sim, mas não consigo dizer algo concreto sem ver o codigo
<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);
function desenhaCirculo(evento, cor) {
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);
}
function mudaCor(cores) {
var contador = 0;
while(contador < cores.length){
tela.onclick = desenhaCirculo(evento, cores[i]);
contador++;
alert('Funcionou!');
}
return false;
}
var cores = ['blue', 'red', 'green'];
tela.oncontextmenu = mudaCor(cores);
</script>
Josemar, o problema esta aqui:
tela.oncontextmenu = mudaCor(cores);
Para eventos e, oncontextmenu é um evento, você precisa chamar uma função que é atribuída à tela.oncontextmenu. No entanto, veja que você passou o resultado da função mudaCor porque invocou a função com parênteses passando a lista de cores como parâmetro. Como o retorno é false você estará gravando false em. tela.oncontextmenu.
A primeira mudança a ser feita é:
tela.oncontextmenu = mudaCor;
Veja que agora tela.oncontextmenu recebe a função, seu código e não seu resultado. É como se tela.oncontextmenu passasse a ser a função mudaCor.
Quando o botão é clicado o navegador sem você ver chama a função armazenada em tela.oncontextmenu. Mas temos um problema.
Sua função muda cor não pode receber a lista de fotos como parâmetro porque o navegador só sabe chamar a função e não sabe passar o array de cores. Nesse sentido sua função mudaCor precisa mudar, por exemplo, não precisa receber cores como parâmetro. Variáveis declaradas fora de uma função é acessível diretamente dentro da função.
Outro ponto é que mostraCor não deve associar o evento onclick. Essa associação deve ser feita fora... Uma coisa é mudar cor outra coisa é desenhar na tela.
Aguardamos seu código modificado.
Josemar, segue um passo a passo das alterações que vou fazer no seu código. Estude-as com carinho!
1 - Seu código atual!
<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);
function desenhaCirculo(evento, cor) {
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);
}
function mudaCor(cores) {
var contador = 0;
while(contador < cores.length){
tela.onclick = desenhaCirculo(evento, cores[i]);
contador++;
alert('Funcionou!');
}
return false;
}
var cores = ['blue', 'red', 'green'];
tela.oncontextmenu = mudaCor(cores);
</script>Vou mudar a atribuição de tela.oncontextmenu que deve receber a função mudaCor e não o resultado de sua chamada. Também vamos remover o parâmetro cores!
<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);
function desenhaCirculo(evento, cor) {
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);
}
// mudei aqui, removi o parâmetro
function mudaCor() {
var contador = 0;
while(contador < cores.length){
tela.onclick = desenhaCirculo(evento, cores[i]);
contador++;
alert('Funcionou!');
}
return false;
}
var cores = ['blue', 'red', 'green'];
// mudei aqui
tela.oncontextmenu = mudaCor;
</script>3 - Agora vou extrair a associação de tela.onclick para fora de mudaCor. São duas coisas que acontecem em separado:
<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);
function desenhaCirculo(evento) {
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);
}
function mudaCor() {
var contador = 0;
while(contador < cores.length){
contador++;
alert('Funcionou!');
}
return false;
}
var cores = ['blue', 'red', 'green'];
// veja que também não chamei a função desenhaCirculo, ela foi atribuída para tela.onclick
tela.onclick = desenhaCirculo;
tela.oncontextmenu = mudaCor;
</script>4 - Toda vez que clicarmos com o botão direito o contador ser a zerado, não podemos fazer isso. É por isso que a variável contador vai ser declarada para fora do mudaCor e lá dentro ela será incrementada:
<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 contador = 0; // declarei o contador fora das funções. Ele pode ser acessado dentro da função sem ser passado como parâmetro.
function desenhaCirculo(evento) {
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);
}
function mudaCor() {
// toda vez que o botão direito é clicado, incremento o contador e texto se cheguei na última cor. Se cheguei, volto o contador para zero
contador++;
if(contador == cores.length) {
contador = 0;
}
return false;
}
var cores = ['blue', 'red', 'green'];
// veja que também não chamei a função desenhaCirculo, ela foi atribuída para tela.onclick
tela.onclick = desenhaCirculo;
tela.oncontextmenu = mudaCor;
</script>5 - Ainda não esta pronto, vou organizar as variáveis, jogar a lista de cores lá para o topo, perto de contador. Vou alterar a função desenhaCirculo para acessar o array de cores levando em consideração o último contador atribuído pela função mudaCor chamada quando clico com o botão direito:
<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 contador = 0;
var cores = ['blue', 'red', 'green'];
function desenhaCirculo(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
// aqui acesso o array de cores, levando em consideração a cor atual!
pincel.fillStyle = cores[contador];
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
function mudaCor() {
// toda vez que o botão direito é clicado, incremento o contador e texto se cheguei na última cor. Se cheguei, volto o contador para zero
contador++;
if(contador == cores.length) {
contador = 0;
}
return false;
}
tela.onclick = desenhaCirculo;
tela.oncontextmenu = mudaCor;
</script>Sucesso e bom estudo meu aluno!
Josemar, não esquece de me dar um feedback sobre dúvidas que possam ter aparecido. Se esta tudo certinho, não esqueça de marcar minha resposta como solução.