No if (evento.shiftKey && evento.altKey)
encontrei uma falha no código sugerido (o alert
é acionado ao pressionar as duas teclas -SHIFT e ALT - e clicar com o botão esquerdo do mouse na tela, porém o círculo é formado mesmo assim), então fiz uma correção usando o return false;
. Já na sequencia do código (else if(evento.shiftKey && raio +10 <= 40)
) me deparei com outro detalhe. Quando eu usei o SHIFT para fazer o incremento no tamanho, ia tudo OK, porém se eu fizesse uma redução com o ALT, ou qualquer redução em que o tamanho ficasse com múltiplo de 5, e tentasse aumentar até o tamanho máximo, ele travava no tamanho 35, porque o código não permitia que passasse do tamanho 40. Nesse casso, eu acrescentei no código else if(evento.shiftKey && raio == 35) { raio += 5; }
.
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'white';
pincel.fillRect(0, 0, 600, 400);
pincel.strokeRect(0, 0, 600, 400);
var cor = ['blue', 'red', 'green'];
var posicao = 0;
var raio = 10;
function desenhaCirculo(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if (evento.shiftKey && evento.altKey) {
alert('Só aperte uma tecla por vez, por favor!');
return false;
} else if(evento.shiftKey && raio +10 <= 40) {
raio += 10;
} else if(evento.shiftKey && raio == 35) {
raio += 5;
} else if(evento.altKey && raio > 10) {
raio -= 5;
}
pincel.fillStyle = cor[posicao];
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * 3.14);
pincel.fill(); //preenche o círculo
console.log('Posição no clique: ' + x + ', ' + y);
}
function mudarCor() {
posicao++;
if(posicao == cor.length) {
posicao = 0;
}
return false;
}
tela.oncontextmenu = mudarCor;
tela.onclick = desenhaCirculo;
</script>