Javascript 图像在画布上的错误位置

我试图制作一个基于光标移动的游戏（比如agar.io），但是当图像在画布上渲染时，它距离原点的距离是我希望的4倍

Javascript、CSS、HTML：

函数组合（）{
movechar（方向（））
画（）
}
函数绘图（）{
//context.save（）
clearRect（0，0，canvas.width，canvas.height）；
//续还原（）
context.drawImage（img、xChar、yChar）
//context.drawImage（img，1,1）
}
函数方向（）{
var delX=xCor-xChar
变量delY=yCor-yChar
var delta=Math.sqrt（delX*delX+delY*delY）
var dirX=delX/delta
变量dirY=delY/delta
返回[dirX，dirY]
}
函数movechar（dirArr）{
xChar+=dirArr[0]
yChar+=dirArr[1]
}
var d=新日期（）
var sTime=d.getTime（）
console.log（sTime）
var canvas=document.getElementById（“playerCanvas”）
var context=canvas.getContext（'2d'）
context.im
var img=新图像（）
img.src=“char.bmp”，img.width=8，img.height=8
var xCor=0
var yCor=0
var xChar=canvas.clientWidth/2
var yChar=canvas.clientHeight/2
$（“画布”）。在（“mousemove”上，函数（e）{xCor=e.clientX；yCor=e.clientY；}）
函数docload（）{setInterval（组合，30）}

正文{
边际：0px；
溢出：隐藏；
}
canvas#playerCanvas{
宽度：100%；
身高：100%；
利润率：0%；
背景图片：url（“floor2.bmp”）；
背景重复：重复；
}

wizard.io
Ur浏览器sux

画布分辨率与显示大小不匹配时。 渲染到画布时，通常以画布像素为单位。画布中的像素数通过

宽度

和

高度

属性设置，并定义画布分辨率

当显示画布时，您可以通过

canvas.style

和高度设置显示大小，这不会更改画布分辨率，只会更改大小。结果是拉伸画布像素以覆盖许多CSS像素。然后，当您尝试在CSS像素中的鼠标坐标处绘制时，它与鼠标下方画布上的像素不匹配

为了确保不匹配，最好避免使用

canvas.style.width

和

canvas.style.height

属性，直接设置

canvas.width

和

height

属性。注意：这些值始终是像素，并且不是后缀，即

canvas.width=“100%”

将不起作用

这个问题很容易解决。 下面我对您的代码片段进行了更改，并用注释对其进行了标记

函数组合（）{
movechar（方向（））
画（）
}
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
context.fillStyle=“红色”；
//--------------------------------------------------------------------
//由于你的图片有坏的网址，我把盒子放在那里
上下文。strokeRect（xChar，yChar，50,50）
context.fillRect（xCor-10，yCor-10,20,20）
}
函数方向（）{
var delX=xCor-xChar
变量delY=yCor-yChar
var delta=Math.sqrt（delX*delX+delY*delY）
var dirX=delX/delta
变量dirY=delY/delta
返回[dirX，dirY]
}
函数movechar（dirArr）{
xChar+=dirArr[0]
yChar+=dirArr[1]
}
var d=新日期（）
var sTime=d.getTime（）
var canvas=document.getElementById（“playerCanvas”）
var context=canvas.getContext（'2d'）
//====================================================================
//重要的一点
//--------------------------------------------------------------------
//将画布大小设置为窗口大小
canvas.width=内部宽度；
canvas.height=内部高度；
//--------------------------------------------------------------------
context.im
var xCor=0
var yCor=0
//--------------------------------------------------------------------
//使用画布高度和宽度，而不是clientWidth高度
var xChar=canvas.width/2
var yChar=canvas.height/2
//--------------------------------------------------------------------
//更改侦听器只是为了使其工作无需JQuery
addEventListener（“mousemove”，函数（e）{xCor=e.clientX；yCor=e.clientY；}）
函数docload（）{setInterval（组合，30）}

正文{
边际：0px；
溢出：隐藏；
}
canvas#playerCanvas{
/*不需要，因为他们正在拉伸画布
宽度：100%；
身高：100%；
*/
利润率：0%；
背景图片：url（“floor2.bmp”）；
背景重复：重复；
}

wizard.io
Ur浏览器sux

如何获得

innerWidth

和

innerHeight

变量？否则，谢谢。@opfromthestart

innerWidth

和

innerHeight

是作为窗口对象一部分的标准全局变量。