如何获取鼠标点击画布元素的坐标？

通过使用事件侦听器检测单击事件并找到事件的 x 和 y 位置，可以找到每次单击时鼠标的坐标。

创建了一个函数，它将画布元素和事件作为参数。使用getBoundingClientRect()函数可以找到画布的尺寸。此方法返回元素的大小及其相对于视口的位置。

鼠标点击的 x 坐标位置是通过用边界矩形的 x 位置减去事件的 x 位置来找到的。使用“clientX”属性找到事件的 x 位置。画布元素的 x 位置，即矩形的左侧，可以使用 'left' 属性找到。

类似地，单击的 y 坐标位置是通过用边界矩形的 y 位置减去事件的 y 位置来找到的。使用“clientY”属性找到事件的 y 位置。可以使用'top' 属性找到画布元素的y 位置，即矩形的顶边。

此减法将补偿页面上画布的位置，因为事件的 x 和 y 位置将相对于页面而不是画布。

为了检测点击，首先使用 querySelector() 方法选择画布元素。 addEventListener()方法用于此元素以侦听“mousedown”事件。每当按下鼠标按钮时都会触发此事件。该函数的回调用于调用上面创建的函数来检测点击的位置。

例子：

      

    
        How to get the coordinates of a mouse
        click on a canvas element?
    

  

    
        GeeksforGeeks
    
      
    
        How do I get the coordinates of a 
        mouse click on a canvas element?
    
      
    
        Click anywhere on the canvas element
        to get the mouse pointer location.
    
      
    
        The size of the canvas
        is a square of 200px.
    
      
    Check the console for the output.
      
    
    
  
    
        function getMousePosition(canvas, event) {
            let rect = canvas.getBoundingClientRect();
            let x = event.clientX - rect.left;
            let y = event.clientY - rect.top;
            console.log("Coordinate x: " + x, 
                        "Coordinate y: " + y);
        }
      
        let canvasElem = document.querySelector("canvas");
          
        canvasElem.addEventListener("mousedown", function(e)
        {
            getMousePosition(canvasElem, e);
        });
    

  

输出：

• 在单击任何地方进行画布之前：
  
• 在画布中单击后：