Question

** 在标记为重复之前阅读！ **

在画布上获取鼠标位置几乎可以正常工作。

我的窗口大小为800 x 600

我的画布尺寸为400 x 300：

canvas.width = 400;
canvas.height = 300;

我的画布css尺寸为100% x 100%：

canvas {width: 100vw; height: 100vh;}

问题是：如果我的鼠标位于画布的中间，我会得到这个鼠标位置：400, 300。如果我的窗口大小为1600 x 1200，我会得到800, 600。

我想获得鼠标的画布位置。我的意思是，无论窗口大小如何，我都希望获得200, 150。

我该怎么做？感谢您的帮助。

Answer 1

您必须创建从模型坐标到屏幕坐标并返回的转换。以下是一个很好的解释：http://www.ckollars.org/canvas-two-coordinate-scales.html

Answer 2

您可以将其粘贴到您的代码中。

document.getElementById("canvasId").addEventListener('mousemove',function(event){mousePos(event);});
function getMousePos(e){
    var rect = canvas.getBoundingClientRect();
    //this gets your canvas size.
    return {
        x: Math.round(e.clientX - rect.left),
        y: Math.round(e.clientY - rect.top)
    };
function mousePos(e){
    var pos = getMousePos(e);
    var mouseX = pos.x;
    var mouseY = pos.y;
}

然后你可以在其他地方引用mouseX和mouseY。

//enter the rest of your code here.

在画布上获得画布鼠标位置

2 个答案: