Todas as vezes que me deparo com problemas mais complexos, que envolvem blocos de códigos que se relacionam, travo e fico perdido.
Esse exercício da troca de cor e o do gráfico de barras, da aula 02, são bons exemplos.
Já consegui uma boa noção de funções, variáveis e loops (ensinados no 1º módulo), mas ainda tenho muita dificuldade em encontrar um raciocínio lógico coeso em problemas extensos.
O que deve ser feito neste caso? Revisar o primeiro módulo do curso do 0 para preencher lacunas de conceitos que (possivelmente) não foram assimilados?
Para se ter uma ideia, vou deixar abaixo o código que consegui produzir, até agora, deste exercício. Não sei para onde correr, tentando encontrar um modo de fazer com que a função troque as cores.
// Capturando a tela
var tela = document.querySelector("canvas");
// Criando um pincel e informando à tela que os gráficos serão 2d
var pincel = tela.getContext("2d");
// Cor Background da Tela
pincel.fillStyle = 'grey';
// Cordenadas e Medidas do Background
pincel.fillRect(0, 0, 600, 400);
// Função Desenha Círculo
function desenhaCirculo(evento) {
/* Pegando as cordenadas do clique e
relacionando-as ao canvas, não à tela inteira */
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
// Desenhando um Círculo ao clicar
pincel.fillStyle = 'blue';
pincel.beginPath();
// Pega as cordenadas como argumento
pincel.arc(x, y, 10, 0, 2 * Math.PI);
pincel.fill();
// Logando as cordenadas
//console.log(x + "," + y);
}
var cores = ['blue', 'red', 'green'];
//Função Muda Cor
function mudaCor() {
var contador = 0;
while(contador < cores.length) {
tela.oncontextmenu = cores[i];
}
//Impede que o menu padrão seja exibido
return false;
}
// Atribuindo a função ao evento
tela.onclick = desenhaCirculo;
// Atribuindo a função Muda Cor ao evento
tela.oncontextmenu = mudaCor;