Bom dia pessoal.
Nesse script que eu fiz com o que foi aprendido até o momento, gostaria de saber se existe uma maneira de que, quando o usuário apertar as tecla SHIFT + botão direito do mouse ou ALT + botão direito do mouse, o pincel mude de tamanho mais não de cor, que é o que está acontecendo no momento. A mudança de cor deve acontecer somente quando nenhuma das duas teclas for acionada. Será que tem como ? Obrigado !
<meta charset="UTF-8">
<canvas width="750" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'black';
pincel.fillRect(0, 0, 750, 400);
pincel.strokeStyle='black';
pincel.strokeRect(0,0,750,400);
pincel.fillStyle = 'white';
pincel.fillRect(0, 0, 600, 400);
pincel.strokeStyle='black';
pincel.strokeRect(0,0,600,400);
var cores = ['blue', 'red', 'green','yellow','orange']
var indiceCorAtual = 0; // começa com blue
var raio = 6;
var incremento = 2;
function desenhaPincel() {
var xi = 675
var yi = 90
pincel.fillStyle = cores[indiceCorAtual];
pincel.beginPath();
pincel.arc(xi, yi, raio, 0, 2 * 3.14);
pincel.fill();
}
function desenhaTexto(texto, x , y) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.font='15px Georgia';
pincel.fillStyle='white';
pincel.fillText(texto, x, y);
}
function opcoesCores(x,y,cor) {
pincel.fillStyle =cor;
pincel.beginPath();
pincel.arc(x,y,10, 0, 2 * 3.14);
pincel.fill();
}
function desenhaMostrador() {
desenhaTexto("Cor Selecionada", 625, 30);
desenhaTexto("Botão direito",633,170);
desenhaTexto("Alterna cor",638,190);
//Loop para desenhar cores no mostrador
var x = 635
i = 0
for(var repeticoes = 0; repeticoes < cores.length; repeticoes++) {
opcoesCores(x,210,cores[i]);
x = x + 20;
i++;
}
desenhaTexto("Shift + Botão direito", 610,240);
desenhaTexto("Aumenta o pincel",620,260);
desenhaTexto("Alt + Botão direito", 615,300);
desenhaTexto("Diminui o pincel",620,320);
desenhaTexto("Botão Esquerdo",625,360);
desenhaTexto("Desenha na tela",625,380);
desenhaPincel();
}
desenhaMostrador();
function definePincel(evento) {
desenha = false;
indiceCorAtual++;
if(indiceCorAtual >= cores.length) {
indiceCorAtual = 0; // volta para a primeira cor, azul
}
if (evento.shiftKey && evento.altKey) {
alert('Só aperte uma tecla por vez, por favor!');
} else if(evento.shiftKey && raio + incremento <= 20) {
raio = raio + incremento;
} else if(evento.altKey && raio - incremento >= 2) {
raio = raio - incremento;
}
pincel.fillStyle='black';
pincel.fillRect(600, 0, 750, 400);
desenhaMostrador();
return false; // para não exibir o menu padrão do canvas
}
tela.oncontextmenu = definePincel;
desenha = false;
function desenhaCirculo(evento) {
if(desenha) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = cores[indiceCorAtual];
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
tela.oncontextmenu = definePincel;
}
}
function ativaDesenha() {
desenha = true;
}
function desativaDesenha() {
desenha = false;
}
function botaoEsquerdo() {
tela.onmousemove = desenhaCirculo;
}
tela.onmousedown = ativaDesenha;
tela.onmouseup = desativaDesenha;
tela.onclick = botaoEsquerdo;
</script>