canvas中鼠标位置错位的问题？

Question

我用canvas实现了一个刮刮卡组件效果
但是有一个bug
拟篮筐为鼠标位置
当鼠标位置在右侧边缘时涂抹位置正确
当鼠标位置在左侧边缘的涂抹位置会有偏移，如图所示
我的代码如下：

this.context.arc(touch.pageX - this.canvas.offsetLeft, touch.pageY - this.canvas.getBoundingClientRect().top + 10, 20, 0, Math.PI * 2);

请问是什么原因导致的移动量偏移呢？还望指正，谢谢

Answer 1

let bounding = this.canvas.getBoundingClientRect()
this.context.arc(touch.clientX - bounding.left, touch.clientY - bounding.top + 10, 20, 0, Math.PI * 2)

试试看看有没有用