Javascript 是什么原因导致我的画布游戏中鼠标位置的偏移？

我目前正在创建一个类似于经典恐怖迷宫游戏的最终项目。我使用的是Vanilla JS和HTML5画布，不希望使用外部库或框架。鼠标的位置和应该跟随它的矩形之间有很大的偏移。似乎当我离屏幕左角越远，偏移量越大。请查看：

---

如果任何人有任何可能导致这种情况的原因，请告诉我！我不熟悉

，所以这里的问题实际上根本不是Javascript，而是CSS

在CSS中，您将画布的宽度设置为占据容器的100%，并根据宽度自动缩放高度

画布{
边框：1px纯黑；
背景色：黑色；
宽度：100%；
高度：自动；
保证金：0；
显示：内联；
/*光标：无*/
}

然而，在JS中，您告诉脚本画布的宽度正好为1600px，高度正好为1400px。这会使事件侦听器混淆，使其基于1600x1400返回的数字，而不是CSS中设置的实际大小

var canvas=document.querySelector（'canvas'）；
//将图形上下文返回到变量“c”
//允许您绘制二维图元
var c=canvas.getContext（'2d'）；
画布宽度=1600；
帆布高度=1400；
canvas.style.width=1600；
canvas.style.height=1400；

要解决这个问题，您只需要将画布设置为固定大小，或者在页面加载时读取大小，并在每次重新加载页面时更新数字。下面是第一个可能的解决方案的示例。请注意，该示例未考虑与滚动偏移相关的问题

var canvas=document.querySelector（'canvas'）；
//将图形上下文返回到变量“c”
//允许您绘制二维图元
var c=canvas.getContext（'2d'）；
画布宽度=1600；
帆布高度=1400；
canvas.style.width=1600；
canvas.style.height=1400；
///----------------------------------------------------
var canvasPos=getPosition（canvas）；
var-mouseX=0；
var-mouseY=0；
var mouseWidth=30；
var鼠标高度=30；
canvas.addEventListener（“mousemove”，setMousePosition）；
函数setMousePosition（e）{
mouseX=e.clientX-canvasPos.x；
mouseY=e.clientY-canvasPos.y；
}   
函数更新（）{
c、 clearRect（0，0，canvas.width，canvas.height）；
//1.创造景观
//a.迷宫（蓝色区域）
c、 beginPath（）；
c、 移动到（1501300）；//开始
c、 lineTo（150400）；
c、 lineTo（1350400）；
c、 lineTo（1350450）；
c、 lineTo（700450）；
c、 lineTo（7001300）；
c、 lineTo（1501300）；
c、 fillStyle=“#C1EEFF”；
c、 填充（）；
//红色区域
c、 beginPath（）；
c、 moveTo（1350400）；
c、 lineTo（1350450）；
c、 lineTo（1300450）；
c、 lineTo（1300400）；
c、 moveTo（1350400）；
c、 fillStyle=“#FF4000”；
c、 填充（）；
//2.创建游标
c、 beginPath（）；
c、 rect（mouseX、mouseY、mouseWidth、mouseHeight）；
c、 fillStyle=“#928C6F”；
c、 填充（）；
//控制台日志（mouseX，mouseY）；
requestAnimationFrame（更新）；
}
addEventListener（“mousemove”，update（））；
功能位置（el）{
var xPosition=0；
var-yPosition=0；
while（el）{
xPosition+=（el.offsetLeft-el.scrollLeft+el.clientLeft）；
yPosition+=（el.offsetTop-el.scrollTop+el.clientTop）；
el=el.offsetParent；
}
返回{
x:xPosition，
y:yPosition
};
}

h1{
文本对齐：居中；
}
帆布{
边框：1px纯黑；
背景色：黑色；
/*这里是进行更改的地方*/
/*宽度：100%*/
/*高度：自动*/
保证金：0；
显示：内联；
/*光标：无*/
}
.集装箱{
文本对齐：居中；
保证金：0；
/*显示器：flex；
证明内容：中心*/
}
身体{
保证金：0；
最大宽度：1000px；
背景色：#6d72c3；
}

迷宫游戏

大声呼喊，感谢您帮助我找到解决方案。我基本上只是删除了画布所有父容器中的额外边距，以及画布本身。然后我在JS中为画布的宽度和高度设置了一个固定的宽度，如canvas.width/canvas.height。鼠标偏移基本上消失了。检查它–

我没有看，但我猜您是在检查窗口而不是画布上的位置。