<meta charset="utf-8">
<canvas id="tela" width="600" height="400">
</canvas>
<script>
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
c.fillStyle = "gray";
c.fillRect(0,0,600,400);
tela.onmousedown = function(evento){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if(evento.button == 0){
c.fillStyle = "blue";
c.beginPath();
c.arc(x,y,10,0,2*3.14);
c.fill();
}else{
c.fillStyle = "red";
c.beginPath();
c.arc(x,y,10,0,2*3.14);
c.fill();
}
console.log("Posição do clique é: " + x + " , " + y);
}
</script>
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas
respostas
Fiz diferente, utilizei o onmousedown, porém depois vou implementar o preventDefault. Abaixo o código.
Mas ainda tem um pequeno detalhe , se eu dou o clique com o botão do meio do mouse ele ainda pinta a tela com a bolinha vermelha. Seria um bom desafio fazer com que a bolinha vermelha só apareça com o clique do direito do mouse.
Lucas,
Para alterar a cor do clique conforme botão você pode utilizar o metodo which de evento que retorna um inteiro para cada clique de um botão especifico: 1 para esquerdo, 2 para botao do meio e 3 para direito, eu utilizei com um if abaixo mas pode ser utilizado com um switch case também, fica ao seu critério.
<canvas id="tela" width="600" height="400"></canvas>
<script>
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
c.fillStyle="gray";
c.fillRect(0,0,600,400);
function desenhaCirculo(cor,x,y){
c.fillStyle=cor;
c.beginPath();
c.arc(x,y,10,0,2*3.14);
c.fill();
}
function atira(evento){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
evento.preventDefault();
if(evento.which == 1){
desenhaCirculo("red",x,y);
} else if(evento.which == 2){
desenhaCirculo("green",x,y);
}else {
desenhaCirculo("blue",x,y);
}
}
tela.onclick = atira;
tela.oncontextmenu = atira;
</script>
solução!
Lucas, pela alteração apresentada pelo Gustavo você tem o resultado esperado.