Fala Cássio, tudo beleza comigo mano e com você? :) Então a medida que as aulas foram passando eu fui criando um canvas embaixo do outro, então vou passar o que seria o canvas numero 5, que a medida que pressiono CTRL e desenho com o mouse eu apago o que foi desenhado, então segue o code.
<h2>Canvas 5</h2>
<canvas id="canvas5" height="500">
</canvas>
Escolha uma cor <input type="color"> <!-- Com o tipo cor podemos ter um tipo de entrada que nos mostra as cores a serem selecionadas -->
<script>
var tela =document.getElementById('canvas5');
var pincel = tela.getContext('2d');
var paleta = document.querySelector('input'); //aqui criamos uma variável que deixa ela operacional para o java script (o querySelector é ruim por que pode afetar outros inputs, o melhor seria o getElementById e criar um id pro input)
canvas5.width = document.body.clientWidth; //document.width is obsolete
//var cores=['red','blue','green']; // aqui criamos uma outra forma de selecionar cores, onde trocamos as cores com o botão direito do mouse
var desenhar=false;
function desenhaCirculo(evento){//com uma variavel interna dentro de uma função atrela a uma ação de mouse ou teclado do usuario como o onmousemove eu consigo acessar variaveis de onde eu cliquei com o mouse na região e coisas do tipo
var x = evento.layerX; //layer pega a posição x e y do mouse naquela região específica, enquanto page pega na página toda.
var y = evento.layerY;
var raio=10;
//console.log(x,y);
pincel.beginPath();
//pincel.fillStyle= cores[i];
pincel.fillStyle=paleta.value; // aqui que mudamos a cor de algo pela seleção de cor na paleta pelo usuário
desenhaTexto(canvas5.width/2,300,`Selecione cor com o menu embaixo do canvas `,paleta.value);
if(desenhar){ // condicao para que desenhe quando pressiono o botao do mouse quando passe com o mouse e aperte com o botão esquerdo
if(evento.shiftKey){
raio = 30; // faz o raio triplicar
}/*else{
raio=5;
}volte com raio para a função para fazer o raio normal ser 5*/
if(evento.altKey){ // com apenas os eventos do mouse conseguimos ver se as teclas alt,ctrl e shift estavam pressionadas no momento da ação
raio =5; // faz o raio do circulo ser a metade
}
if(evento.ctrlKey){
pincel.fillStyle='rgb(190, 190, 190)';
raio=30; // a intencao era de ser uma borracha, tanto que ele tá na cor do fundo
}
pincel.arc(x,y,raio,0,2*Math.PI); // apesar das logicas quanto a mudança de raio printa o circulo quando passa o mouse e pressiono com o botao esquerdo
pincel.fill();
//console.log(evento);
}
if(x<=0||x>=canvas5.width||y<=0||y>=499){ // condições de escape para que não continue desenhando quando sai da área do canvas
desenhar=false;
}
console.log(x,y, desenhar);
}
function desenhaTexto(x , y,texto,cor) { // texto muda de cor com a cor selecionada pelo usuário
pincel.fillStyle=cor;
pincel.font='30px Georgia';
pincel.fillText(texto,x,y);
}
tela.onmousemove =desenhaCirculo; //aqui atrelamos o código da função desenha circulo a ação onmousemove (que pega o movimento do mouse na área do canvas) poderiamos fazer por função oculta mas isso deixa o codigo com baixa legibilidade
tela.onmousedown = habilitaDesenho; // onmousedown pega o clique esquerdo e habilitar o desenho
tela.onmouseup = desabilitaDesenho; // quando o botao esquerdo do mouse é solto eu desabilito o desenho (aqui podia caber função oculta com function(){desenhar=false;})
function habilitaDesenho(){
desenhar=true;
}
function desabilitaDesenho(){
desenhar=false;
}
desenhaTexto(canvas5.width/2,250,"Clique em mim! :) ",'black');
desenhaTexto(canvas5.width/2,330,"Pressione shift e click para bolas maiores",'black');
/* function mudaCor (){
let i;
i++;
if(i>cores.length-1){
i=0;
}
console.log(cores[i]);
pincel.fillStyle= cores[i];
return false;//para nao mostrar o menu quando aperta o botão direito
}
*/
// tela.oncontextmenu=mudaCor; //oncontextmenu é o clique no botão direito
</script>
Com o seguinte css (falta o reset.css )
canvas {
background: rgb(190, 190, 190);
margin: 40px 0;
display: block;
}
h2 {
text-align: center;
margin: 10px 0;
color: royalblue;
font-size: 18px;
}
