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

Question

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

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; 
};

除了这个鼠标问题，其他一切都很好...甚至图形也能完美缩放。

我获取鼠标坐标的方式是否有任何问题，或者我的调整大小功能有一些错误？任何帮助，不胜感激。

谢谢。你可以在这里找到完整的代码 打乒乓球游戏 在CodePen上

编辑：我已经在代码开头声明了变量宽度和高度。

var height = 500;
var width = 700;

Answer 1

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

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 文件，因为您正在转换您不太确定的东西。