Javascript 如何在可调整大小的画布中正确获取鼠标坐标？

我使用canvas元素在JavaScript中创建了一个乒乓球游戏。为了增加我的知识，我还附加了一个调整画布大小的功能，如下所示：

window.addEventListener("resize", OnResizeCalled, false); 

function OnResizeCalled() { 
    canvas.style.width = window.innerWidth + 'px'; 
    canvas.style.height = window.innerHeight + 'px'

    var gameWidth = window.innerWidth; 
    var gameHeight = window.innerHeight; 
    var scaleToFitX = gameWidth / width; 
    var scaleToFitY = gameHeight / height; 

    var currentScreenRatio = gameWidth / gameHeight; 
    var optimalRatio = Math.min(scaleToFitX, scaleToFitY); 

    if (currentScreenRatio >= 1.77 && currentScreenRatio <= 1.79) { 
        canvas.style.width = gameWidth + "px"; 
        canvas.style.height = gameHeight + "px"; 
    } 
    else { 
        canvas.style.width = width * optimalRatio + "px"; 
        canvas.style.height = height * optimalRatio + "px"; 
    } 
}

canvas {
        position: absolute;
        top: 0px;
        left: 0px;
        transform: translate(-50%, -50%);*/
}

当我通过调整浏览器的大小玩游戏时，游戏的大小也正确调整了，但是划桨的移动不准确。它没有用鼠标正确定位

我对鼠标移动进行了如下编码：

function playerBatMove(event) {
        mouseY = event.clientY - canvas.offsetTop;
        if (mouseY <= 19) {mouseY = 20};
        if (mouseY+playerBat.batHeight >= height-19) {mouseY = (height-20)-playerBat.batHeight};
        playerBat.y = mouseY; 
};

---

我将编辑评论，以便您更容易理解

function playerBatMove(event) {
    mouseY = event.clientY* (newHeight/oldHeight) - canvas.offsetTop;
     //the scale factor is newHeight/oldHeight, or how much you multiplied
     // or you can just say 1/scaleY

    playerBat.y = mouseY; 
};

你在这里说的是，你想采取鼠标事件。但是，仅将其视为未缩放。

canvas.offsetTop

后面出现的原因是

offsetTop

根本没有缩放

---

还要记住：删除你的css文件，确保它正常工作，然后添加你的css文件，因为你正在转换你不太确定的东西。

我将编辑注释，以便你更容易理解

function playerBatMove(event) {
    mouseY = event.clientY* (newHeight/oldHeight) - canvas.offsetTop;
     //the scale factor is newHeight/oldHeight, or how much you multiplied
     // or you can just say 1/scaleY

    playerBat.y = mouseY; 
};

你在这里说的是，你想采取鼠标事件。但是，仅将其视为未缩放。

canvas.offsetTop

后面出现的原因是

offsetTop

根本没有缩放

---

还请记住：删除你的css文件，确保它正常工作，然后添加你的css文件，因为你正在转换你不太确定的东西。

好的，所以我试着按照你说的做。在mousemove事件中，我将scaleToFitX乘以mouseY，但仍然没有效果。我做得不对？你删除了css转换吗？好吧，我试着按照你说的做。在mousemove事件中，我将scaleToFitX乘以mouseY，但仍然没有效果。我做得不正确？您是否删除了css转换？请在问题中澄清您在

var scaleToFitX=gameWidth/width；行中定义
width
的位置
高度
也有类似问题。注意：代码笔中的所有警报都很难查看（计算机总是赢）。我编辑了问题，还更改了代码笔链接。现在您可以不间断地阅读了。请在问题中澄清您在
var scaleToFitX=gameWidth/width；行中定义
width
的位置
高度
也有类似问题。注意：代码笔中的所有警报都很难查看（计算机总是赢）。我编辑了问题，还更改了代码笔链接。现在你可以不间断地阅读了。