Estou descobrindo como se usa essa caixa de comentário, então vou deixar minhas observações aqui e no final do código (Editei bastante até eu acertar a formatação, mas acho que agora peguei o jeito).
SOLUÇÃO IMPLEMENTADA POR MIM: Eu inseri a seguinte variável "var cLength = colors.length - 1;", pois, sempre para qualquer ARRAY a quantidade de elementos que podem ser chamados será o tamanho do ARRAY subtraído do número 1. E, em minha condicional para a mudança de cor, que é "if (i == cLength) { i=0; }else{ i++; }", simplesmente, achei essa forma preferível para atender a proposta da usabilidade do usuário para que ele sempre possa mudar o círculo de cor quando clicar no botão direito. |
NOTA: Você também poderia ter implementado "if (i == colors.length - 1) { i=0; }else{ i++; }", pois você iria obter o mesmo resultado e com um código menor, com uma linha a menos, pois não iria necessitar criar a variável "cLength" que eu criei. Caso eu esteja errado e alguém possua algum comentário que contribua para a minha melhora como aprendiz em programação POR FAVOR DIGA!
ADENDO: Havia lido errado a condicional do código do instrutor e fiz parágrafo de crítica construtiva em relação ao mesmo. Porém, removi tal parágrafo, pois o erro foi todo meu em não prestar atenção direito.
<canvas width="600" height="400"></canvas>
<script>
var screen = document.querySelector('canvas');
var pencil = screen.getContext('2d')
var colors = ['blue', 'red', 'green'];
var i = 0;
var cLength = colors.length - 1;
pencil.fillStyle = 'black'
pencil.fillRect(0, 0, 600, 400);
function showCircle(event) {
console.log(event);
//alert('vc clicou amigo');
var x = event.pageX - screen.offsetLeft;
var y = event.pageY - screen.offsetTop;
pencil.fillStyle = colors[i];
pencil.beginPath();
pencil.arc(x, y, 25, 0, 2 * 3.14);
pencil.fill();
console.log(x + ',' + y);
}
function changeColor() {
if (i == cLength) {
i=0;
}else{
i++;
}
return false;
}
screen.onclick = showCircle;
screen.oncontextmenu = changeColor;
/*
SOLUÇÃO IMPLEMENTADA POR MIM
Eu inseri a seguinte variável "var cLength = colors.length - 1;", pois, sempre para qualquer ARRAY a quantidade de elementos que podem ser chamados será o tamanho do ARRAY subtraído do número 1. E, em minha condicional para a mudança de cor, que é "if (i == cLength) { i=0; }else{ i++; }", simplesmente, achei
preferível atender a proposta da usabilidade do cliente para que ele sempre possa mudar o círculo de cor quando clicar no botão direito.
NOTA
Você também poderia ter implementado "if (i == colors.length - 1) { i=0; }else{ i++; }", pois você iria obter o mesmo resultado e com um código menor, com uma linha a menos, pois não iria necessitar criar a variável "cLength" que eu criei. Caso eu esteja errado e alguém possua algum comentário que contribua para a minha melhora como aprendiz em programação POR FAVOR DIGA! */
</script>