Olá! bom dia!!!!
Seguinte, eu quis fazer uma gracinha e criei uma função chamada limpaTudo que é acionada quando clico com o botão direito do mouse na tela. Essa função redesenha o fundo cinza e a paleta em cima de tudo, deixando zeradinho para rabiscar mais.
Poréeeem,
Percebi que o evento onmousedown ou o onmousemove (aí vocês me digam qual é, pois não sei qual está causando isso) é acionado com qualquer botão, o direito aciona, o esquerdo e até o scroll.
Quando eu clico com o botão direito do mouse na tela, ela limpa, porém um círculo é deixado para trás na tela. O último círculo que foi desenhado antes de limpar a tela, fica. E detalhe, não importa a cor que eu estava usando, esse último círculo permanece na tela e fica azul AHUahuaHUahuhUAahuhuAHUa
Aproveitando, uma outra dúvida, rapidão XD
Essa função limpaTudo, como disse, foi associada ao evento de click oncontextmenu. Quando criei essa função, fiz tanto ela sem parâmetro, quanto usando o parâmetro evento igual as demais funções associadas a uma ação, porém, das duas maneiras funcionou certinho.
Alguem ajuda ai? hehe
Vou deixar meu código e também uns prints do que acontece alí na primeira dúvida:
Código:
<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
function desenhaQuadrado(x, y, tamanho, cor) {
pincel.fillStyle = cor;
pincel.fillRect(x, y, tamanho, tamanho)
pincel.fill();
pincel.strokeStyle = 'black';
pincel.strokeRect(x, y, tamanho, tamanho); //desenha a borda a área informada
}
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * 3.14);
pincel.fill();
}
function desenhaPaletaDeCores() {
desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, 'red');
desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, 'green');
desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue');
}
function lidaComMovimentoDoMouse(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if(desenha) {
if ((x <= 150) && (y <= tamanhoQuadrados + 2)) {
} else {
desenhaCirculo(x, y, 5, corAtual);
}
}
}
function limpaTudo(evento) {
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
desenhaPaletaDeCores();
return false;
}
function habilitaDesenhar() {
desenha = true;
}
function desabilitaDesenhar() {
desenha = false;
}
function selecionaCor(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if ((x < 50) && (y <= tamanhoQuadrados)) {
corAtual = 'red';
} else if ((x > 50) && (x < 100) && (y <= tamanhoQuadrados)) {
corAtual = 'green';
} else if ((x > 100) && (x < 150) && (y <= tamanhoQuadrados)) {
corAtual = 'blue';
}
}
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
limpaTudo();
//pincel.fillStyle = 'lightgray';
//pincel.fillRect(0, 0, 600, 400);
var desenha = false;
var corAtual = 'blue';
var xVermelho = 0;
var xVerde = 50;
var xAzul = 100;
var yQuadrados = 0;
var tamanhoQuadrados = 50;
desenhaPaletaDeCores(); // mostra os quadrados de seleção de cores
tela.onmousemove = lidaComMovimentoDoMouse;
tela.onmousedown = habilitaDesenhar;
tela.onmouseup = desabilitaDesenhar;
tela.onclick = selecionaCor;
tela.oncontextmenu = limpaTudo; //redesenha o fundo cinza e a paleta de cores
</script>Abaixo, um rabisco na minha tela com a cor verde. Importante dizer que esse rabisco começou a ser feito na esquerda e terminou na direita:
)
Agora que vocês viram onde foi o último círculo desenhado, vou clicar com o botão direito do mouse na tela para limpá-la e o resultado será esse:
)
Óia lá que belezinha kkkk Aquele último círculo que era verde, não limpou e voltou pra cor "standard" qe era azul kkkk
Me ajuda aí gente, por favooor!
