Bom dia. eu fiz o código da obra de arte, que é o último deste tópico, porém eu fiquei com uma dificuldade.
eu estava tentando fazer a colisão e na minha ideia era pegar toda a área em cinza menos área das três cores, mas toda vez que eu fazia isso, o sentido x do canvas e o sentido y do mesmo não deixava preencher.
Como eu pego toda a área excluindo a area das três cores?
Segue o trecho do código onde eu teoricamente fiz uma gambiarra em que eu não deixo o mouse preencher a região das três cores.
a função habilitarDesenho ela verifica se o mouse está na região das três cores e seleciona a troca de cor e a função e a função lidaComMovimentoDoMouse fiz um if onde que se está passando pela região, ele praticamente não faz nada.
function lidaComMovimentoDoMouse(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if (x > xVermelho && x < (xVermelho + xVerde + xAzul) &&
y > yQuadrados && y < (yQuadrados + tamanhoQuadrados)) {
}
else if(desenha) {
desenhaCirculo(x, y, 5, corAtual);
}
}
function habilitaDesenhar(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if ( x > xVermelho && x < (xVermelho + tamanhoQuadrados) &&
y > yQuadrados && y < (yQuadrados + tamanhoQuadrados)) {
corAtual = 'red';
}
else if ( x > xVerde && x < (xVerde + tamanhoQuadrados) &&
y > yQuadrados && y < (yQuadrados + tamanhoQuadrados)) {
corAtual = 'green';
}
else if (x > xAzul && x < (xAzul + tamanhoQuadrados) &&
y > yQuadrados && y < (yQuadrados + tamanhoQuadrados)) {
corAtual = 'blue';
}
else {
desenha = true;
}
}
Obrigado pela Atenção.
