Eu tenho que compartilhar do sentimento do colega Roger (que fez um post parecido com esse).
Os exercícios mais complexos estão me deixando inseguro! Quando eu penso que entendi um conceito, um exercício consegue me mostrar que não sei nada quando deveria saber - isso se aplica ao exercício das barras e da mudaCor() - e eu tenho medo do que vem pela frente. Será que é falta de atenção minha?
Fiquei ainda mais frustado ao ver a resposta do exercício depois de dias sem conseguir resolver! Eu tinha formulado a seguinte lógica:
1) pincel.fillStyle recebe um valor, a ser dado pela variável cor;
2) a variável cor deveria receber um dos valores da variável cores = ['blue', 'red', 'green']... logo, pensei em chamar cor = cores[i] - começando com var i = 0, o que deveria me dar o resultado var cor = cores[0]. Logo, var cor = 'blue';
3) a variável i deveria ser incrementada pela função mudaCor(), que só seria chamada com o clique direito do mouse. Caso o valor de i fosse igual ao cores.length (que é 3, quando só temos valores de 0,1 e 2), o valor dei deveria voltar a ser 0;
4) infelizmente, o programa só desenha círculos em azul.
Meu código é o seguinte:
<meta charset="UTF-8">
<canvas id='tela' width=600 height=400></canvas>
<script>
var tela = document.getElementById('tela');
var pincel = tela.getContext('2d');
pincel.fillStyle='lightgray';
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*Math.PI);
pincel.fill();
}
var cores = ['blue', 'red', 'green'];
var i = 0;
var cor = cores[i]
function mudaCor() {
i++;
if(i == cores.length) {
i = 0;
}
return false;
}
tela.onclick = desenhaCirculo;
tela.oncontextmenu = mudaCor;
</script>A resposta do exercício difere do meu código nessa parte:
Resposta certa:
function desenhaCirculo(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = cores[i];
pincel.beginPath();
pincel.arc(x,y,10,0,2*Math.PI);
pincel.fill();
}
var cores = ['blue', 'red', 'green'];
var i = 0;Gostaria de saber o que difere isso do meu código? Pelo meu raciocínio é a mesa coisa!
Alguém pode me mostrar o meu erro?
Grato!
