How to get X and Y click on Canvas

Asked

Viewed 801 times

2

I would like to get X and Y one click on my canvas.

var canvas;//o elemento canvas sobre o qual desenharemos
var ctx;//o "contexto" da canvas que será utilizado (2D ou 3D)
var dx = 5;//a tava de variação (velocidade) horizontal do objeto
var dy = 5;//a tava de variação (velocidade) vertical do objeto
var x = 250;//posição horizontal do objeto (com valor inicial)
var y = 100;//posição vertical do objeto (com valor inicial)
var WIDTH = 800;//largura da área retangular
var HEIGHT = 600;//altura da área retangular

function Desenhar() {
    ctx.beginPath();
    ctx.fillStyle = "blue";
    ctx.arc(x, y, 10, 0, Math.PI*2, true);
    ctx.fill();
}

function LimparTela() {
    ctx.fillStyle = "white";
    ctx.strokeStyle = "black";
    ctx.beginPath();
    ctx.rect(0, 0, WIDTH, HEIGHT);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}

function Placar(){
	ctx.font = "14px Arial";	
	ctx.fillStyle = "red";
	
	ctx.fillText('X = '+ x,745,10);
	ctx.fillText('Y = '+ y,745,25);
}


function Iniciar() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    return setInterval(Atualizar, 10);
}

function KeyDown(evt){
    switch (evt.keyCode) {
        case 38:  /*seta para cima */
            if (y - dy > 0){
                y -= dy;
            }
            break;
        case 40:  /*set para baixo*/
            if (y + dy < HEIGHT){
                y += dy;
            }
            break;
        case 37:  /*set para esquerda*/
            if (x - dx > 0){
                x -= dx;
            }
            break;
        case 39:  /*seta para direita*/
            if (x + dx < WIDTH){
                x += dx;
            }
            break;
    }
}

function Atualizar() {
    LimparTela();    
    Desenhar();
	Placar();
}
window.addEventListener('keydown', KeyDown, true);
Iniciar();
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Canvas</title>
</head>
<body>
    <div>
        <canvas id="canvas" width="800" height="600">
        Se você visualizar esse texto, seu browser não suporta a tag canvas.
        </canvas>
    </div>
    <script type="text/javascript" src="desenhar_circulo.js"></script>
</body>
</html>

How do I do that?

javascript html5 html5-canvas

2 answers

1


Create an event click to the canvas area:

document.getElementById("canvas").addEventListener('click', KeyDown, true);

Then include in the function KeyDown() the code to pick the click position:

evt.clientX (x-axis) and evt.clientY (y-axis)

It is also important to know the distance of the canvas from the top and left so that the position is relative to the canvas and not to the browser window:

canvas.offsetLeft and canvas.offsetTop

Behold:

var canvas;//o elemento canvas sobre o qual desenharemos
var ctx;//o "contexto" da canvas que será utilizado (2D ou 3D)
var dx = 5;//a tava de variação (velocidade) horizontal do objeto
var dy = 5;//a tava de variação (velocidade) vertical do objeto
var x = 250;//posição horizontal do objeto (com valor inicial)
var y = 100;//posição vertical do objeto (com valor inicial)
var WIDTH = 800;//largura da área retangular
var HEIGHT = 600;//altura da área retangular

function Desenhar() {
    ctx.beginPath();
    ctx.fillStyle = "blue";
    ctx.arc(x, y, 10, 0, Math.PI*2, true);
    ctx.fill();
}

function LimparTela() {
    ctx.fillStyle = "white";
    ctx.strokeStyle = "black";
    ctx.beginPath();
    ctx.rect(0, 0, WIDTH, HEIGHT);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}

function Placar(){
	ctx.font = "14px Arial";	
	ctx.fillStyle = "red";
	
	ctx.fillText('X = '+ x,745,10);
	ctx.fillText('Y = '+ y,745,25);
}


function Iniciar() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    return setInterval(Atualizar, 10);
}

function KeyDown(evt){
   
   var canvas = document.getElementById("canvas");

   // posição dos cliques descontando a distância da borda da janela
   var posX = evt.clientX - canvas.offsetLeft;
   var posY = evt.clientY - canvas.offsetTop;

   console.clear();
   console.log("Posição do clique: ", posX+","+posY);

    switch (evt.keyCode) {
        case 38:  /*seta para cima */
            if (y - dy > 0){
                y -= dy;
            }
            break;
        case 40:  /*set para baixo*/
            if (y + dy < HEIGHT){
                y += dy;
            }
            break;
        case 37:  /*set para esquerda*/
            if (x - dx > 0){
                x -= dx;
            }
            break;
        case 39:  /*seta para direita*/
            if (x + dx < WIDTH){
                x += dx;
            }
            break;
    }
}

function Atualizar() {
    LimparTela();    
    Desenhar();
	Placar();
}
window.addEventListener('keydown', KeyDown, true);
document.getElementById("canvas").addEventListener('click', KeyDown, true);
Iniciar();
<div>
  <canvas id="canvas" width="800" height="600">
  Se você visualizar esse texto, seu browser não suporta a tag canvas.
  </canvas>
</div>

  • You’re a genius! Thank you!

1

Friend created a Click method, which is called on the canvas click. In it I get the click event, in this event I check if it contains pageX or pageY, if contain do not need to perform the calculation to know the position of the click in relation to page, if I do not perform the calculation with the due properties, e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft, then obtaining this value, I realize the subtraction of the offsetTop for Y and offsetLeft for X

var canvas;//o elemento canvas sobre o qual desenharemos
var ctx;//o "contexto" da canvas que será utilizado (2D ou 3D)
var dx = 5;//a tava de variação (velocidade) horizontal do objeto
var dy = 5;//a tava de variação (velocidade) vertical do objeto
var x = 250;//posição horizontal do objeto (com valor inicial)
var y = 100;//posição vertical do objeto (com valor inicial)
var WIDTH = 800;//largura da área retangular
var HEIGHT = 600;//altura da área retangular

function Desenhar() {
    ctx.beginPath();
    ctx.fillStyle = "blue";
    ctx.arc(x, y, 10, 0, Math.PI*2, true);
    ctx.fill();
}

function LimparTela() {
    ctx.fillStyle = "white";
    ctx.strokeStyle = "black";
    ctx.beginPath();
    ctx.rect(0, 0, WIDTH, HEIGHT);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}

function Placar(){
	ctx.font = "14px Arial";	
	ctx.fillStyle = "red";
	
	ctx.fillText('X = '+ x,745,10);
	ctx.fillText('Y = '+ y,745,25);
}


function Iniciar() {
    canvas = document.getElementById("canvas");
    canvas.addEventListener('click', Clique);
    ctx = canvas.getContext("2d");
    return setInterval(Atualizar, 10);
}

function KeyDown(e){
    switch (e.keyCode) {
        case 38:  /*seta para cima */
            if (y - dy > 0){
                y -= dy;
            }
            break;
        case 40:  /*set para baixo*/
            if (y + dy < HEIGHT){
                y += dy;
            }
            break;
        case 37:  /*set para esquerda*/
            if (x - dx > 0){
                x -= dx;
            }
            break;
        case 39:  /*seta para direita*/
            if (x + dx < WIDTH){
                x += dx;
            }
            break;
    }

    var px = canvas.clientWidth - x;
    var py = canvas.clientHeight - y;
    console.log(px);
    console.log(py);
}

function Clique(e) {
   var px;
   var py;
   if (e.pageX || e.pageY) { 
      px = e.pageX;
      py = e.pageY;
   } else { 
      px = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
      py = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
   } 
   px -= canvas.offsetLeft;
   py -= canvas.offsetTop;
   console.log('x:', px);
   console.log('y:', py);
}

function Atualizar() {
    LimparTela();    
    Desenhar();
    Placar();
}
window.addEventListener('keydown', KeyDown, true);

Iniciar();
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Canvas</title>
</head>
<body>
    <div>
        <canvas id="canvas" width="800" height="600">
        Se você visualizar esse texto, seu browser não suporta a tag canvas.
        </canvas>
    </div>
</body>
</html>

Browser other questions tagged javascript html5 html5-canvas

You are not signed in. Login or sign up in order to post.