Bom dia, Breno! Tudo bem?
Dei uma lida no seu código e testei aqui. Uma observação é que o array é só uma lista, ele não vai ler o evento shiftkey, quem tem que ler é o script em si =D
Quando testei realmente não acha o evento shiftkey, mas isso acontece pois ele está lá dentro da função raioA() e ela não está sendo chamada e nem enviado o evento pra ela. Então vamos resolver juntos!
Tem outros meios de fazer mas vou seguir com sua lógica para fazer os ajustes necessários:
1. Nossa função raioA() está sendo declarada mas não está sendo chamada. Por exemplo a desenhaCirculo(), tem a sua criação e é chamada no evento onclick, mas a raioA() não está em nenhum lugar.
Podemos resolver isso chamando dentro da desenhaCirculo(), e enviar o evento pra lá também (se não ele não vai funcionar o comando evento.shiftkey):
function desenhaCirculo(evento) {
raioA(evento); <<<<<<<<<<
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(x, y, raio[raioAtual], 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
2. Agora chamamos o que acontece lá dentro da função raioA(). Mas ainda temos alguns problemas.
Ao entrar o código já faz o comando raioAtual++. Esse comando vai fazer o raio[raioAtual] ir pro último item do array.
OBS: Um array começa na posição zero, então quando somar um na posição desse array com dois itens, ele vai pra posição 1 que é a final).
Indo pra última posição, ele vai entrar na condicional if (raioAtual >= raio.length) que está zerando o raio e não o raioAtual (que serve pra pegar a posição no array).
function raioA (evento) { //como estamos enviando o evento, também botei pra receber
raioAtual++ // aumenta o [raioAtual] pra 1, e como o array [...]
// começa em 0 já fomos pro ultimo lugar.
if (raioAtual >= raio.length) { // chegando no ultimo lugar
raio=0 // transformamos o array raio em zero
if (evento.shiftKey) {
raioA = raioAtual + 30
}
}
}
Pra ajustar isso, vamos transformar raio = 0 em raioAtual = 0.
3 - Até agora ele lê o shiftKey. Mas ainda não terminamos: dentro de if (evento.shiftKey) ele está tentando atribuir um valor para raioA. raioA é o nome da nossa função, e não de uma variável.
Nessa parte entramos em um dilema, você fez um array no inicio que limita os tamanhos da bola para [10, 20]. Na hora de desenhar o pincel, você chama o raio com raio[raioAtual], permitindo chamar só os valores de dentro do array raio.
Então, quando apertarmos o shift ele deveria aumentar pro raio 20? Ou devia ultrapassar os limites? Se ele deve aumentar pro raio 20, não devemos aumentar o raioAtual ao entrar na função e sim dentro da condição if (evento.shiftKey):
function raioA (evento) {
if (evento.shiftKey) {
raioAtual++
}
if (raioAtual >= raio.length) {
raioAtual=0
}
}
Desse modo, ele irá fazer a bolinha de raio 10 normalmente e quando clicar em shift ele irá fazer a bola de raio 20, depois voltando para o tamanho normal.
Isso seria um meio de solução mas depende muito da sua intenção pra alterar o que acontece dentro do raioA(). Pode alterar do jeito que quiser, agora o shiftkey está sendo detectado hehe
O código inteiro ficaria assim:
<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 raio = [10, 20]
var raioAtual = 0
function desenhaCirculo(evento) {
raioA(evento);
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(x, y, raio[raioAtual], 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
function raioA (evento) {
if (evento.shiftKey) {
raioAtual++
}
if (raioAtual >= raio.length) {
raioAtual=0
}
}
tela.onclick = desenhaCirculo;
</script>
Espero que tenha te ajudado a entender melhor sobre o código =)
Bons estudos!
