<canvas width= "800" height= "600"></canvas>
<script>
tela= document.querySelector("canvas");
pincel= tela.getContext("2d");
pincel.fillStyle= "darkgray";
pincel.fillRect(0, 0, 800, 600);
var raioAtual= 10;
var somaRaio= 10;
var diminuiRaio=5;
var raioMaximo= 40;
var raioMinimo= 10;
function desenhaCirculo(evento) {
var x= evento.pageX - tela.offsetLeft;
var y= evento.pageY - tela.offsetTop;
pincel.fillStyle= "lightgreen";
pincel.beginPath();
pincel.arc(x, y, raioAtual, 0, 2 * 3.14);
pincel.fill();
console.log(x + "," + y);
if (evento.shiftKey== true && evento.altKey== true) {
alert("Por favor, aperte uma tecla por vez!");
}
if(evento.shiftKey == true) {
raioAtual= raioAtual + somaRaio;
} else if(evento.altKey== true) {
raioAtual= raioAtual - diminuiRaio;
}
if(raioAtual > raioMaximo) {
raioAtual = raioMaximo;
} else if (raioAtual < raioMinimo) {
raioAtual= raioMinimo;
}
}
tela.onclick= desenhaCirculo;
</script>
1
resposta
resposta
Alguém me diz se posso fazer dessa forma?
Oi Victor,
Muito bom, Parabéns pelo empenho nos estudos!
Uma dica legal que poderia dar uma dinâmica boa no alerta seria jogar ele logo nas primeiras linhas da função e incluir uma palavra reservada chamada return; assim ele irá exibir a mensagem e não desenhará a bola, o return é utilizado para sair de uma função.
function desenhaCirculo(evento) {
if (evento.shiftKey== true && evento.altKey== true) {
alert("Por favor, aperte uma tecla por vez!");
return;
}
.
.
.