鼠标位置与HTML canvas ondrag不一致

| 我正在尝试在HTML画布中拖动某些形状,但是在确定鼠标坐标[dx,dy]的变化时遇到了问题 首先,坐标本身没有问题,因为翻转效果完美无误,所以存储在“ 0”中。我正在做的是,首先输入形状时,保存了鼠标坐标。
pos = {x : mousePos[0] , y : mousePos[1]};
然后,onMotion每次鼠标移动时都会更新坐标并记录当前位置
dx=mousePos[0]-pos.x;
dy=mousePos[1]-pos.y;
pos = {x : mousePos[0] , y : mousePos[1]};
然后我将dx和dy值添加到形状坐标(以一个简单的矩形为例)
ctx.fillRect(0+this.dx,0+this.dy,100+this.dx,100+this.dy);
只要鼠标不会太快地移动,它就可以很好地工作(虽然不是很完美)。如果我非常快地移动鼠标而不离开窗口,则矩形不会赶上鼠标。我可以理解是否有延迟赶上鼠标,但是如何取消增量值?显然,我们知道我们从哪里开始,即使在此过程中跳过了数十个/几百个像素,最终鼠标也应该停止并且应该计算出正确的增量值。 任何帮助将不胜感激,因为我在这里遇到了概念上的障碍。     
已邀请:
        您可能会在触发onMotion以获得真实位置而不是增量时尝试获取e.layerX-Y。这样就不能“关闭”。 要使用此功能,请将您的形状放入带有style = \“ padding:0px; margin = 0px; \”的div中,因为该位置相对于父块。     

要回复问题请先登录注册