Where are the canvas mouse coordinates?

How canvas gets mouse coordinates: 1. Create a JavaScript sample file; 2. Get a reference to the Canvas element and add a listener for the mouse movement event; 3. When the mouse moves on the Canvas, it will trigger getMousePos function; 4. Use the "getBoundingClientRect()" method to obtain the position and size information of the Canvas element, and obtain the mouse coordinates through event.clientX and event.clientY.

The operating environment of this tutorial: Windows system, Dell G3 computer.

Canvas is an element in HTML5 used to draw graphics, animations and other visual effects on web pages. Unlike other HTML elements, Canvas does not have its own coordinate system. It uses the coordinate system of the web page, which is the coordinate system with the upper left corner as the origin.

In Canvas, the coordinate position of the mouse is relative to the coordinate position of the entire web page. When the mouse moves on the Canvas, the coordinate position of the mouse can be obtained through event listening.

First, we need to add a listener for mouse movement events on the Canvas. JavaScript can be used to achieve this functionality. The following is a sample code:

javascript
var canvas = document.getElementById("myCanvas");
canvas.addEventListener("mousemove", getMousePos);
function getMousePos(event) {
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;
  console.log("鼠标坐标：x=" + x + ", y=" + y);
}

In the above code, we first obtain a reference to the Canvas element and add a listener for mouse movement events. When the mouse moves on the Canvas, the getMousePos function is triggered.

In the getMousePos function, we first use the getBoundingClientRect() method to obtain the position and size information of the Canvas element. Then, obtain the coordinate position of the mouse relative to the entire web page through event.clientX and event.clientY. Finally, the coordinate position of the mouse relative to the Canvas is obtained by subtracting the coordinates of the upper left corner of the Canvas element, that is, rect.left and rect.top.

In the above code, we use the console.log() function to output the coordinate position of the mouse to the browser's console. You can also use coordinate positions for other operations as needed, such as drawing graphics or performing animations.

In summary, Canvas mouse coordinates are relative to the coordinate position of the entire web page. Through event listeners and some calculations, we can obtain the coordinate position of the mouse on the Canvas and use it to achieve various interactive effects.

The above is the detailed content of Where are the canvas mouse coordinates?. For more information, please follow other related articles on the PHP Chinese website!