获取画布鼠标在画布上的位置答案

【问题标题】：get canvas mouse position on canvas获取画布鼠标在画布上的位置
【发布时间】：2016-10-13 15:53:22
【问题描述】：

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

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

我的窗口大小是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。

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

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

【问题讨论】：

您的画布尺寸不是 400x300，因为您将其定义为 100vw/100vh。所以你得到的正是你所要求的。画布上的位置以画布显示的大小。如果您想将其转换为您的 400x300 硬编码值，您需要自己计算。 actual X = (displayed X / hardcoded X) * Xpos
canvas.width 和 canvas.height 分别是 400 和 300，但 css 像我想要的那样将其拉伸到 100vw/10vh。我可以自己计算，但也许有更简单快捷的内置方法？

标签： javascript html html5-canvas mouse

【解决方案1】：

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

【讨论】：

非常感谢！我希望有一个像ctx.toModelX(x) 这样的内置函数。

【解决方案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.

【讨论】：