触屏版canvas画布实现touch坐标计算(坐标偏移问题)

背景：最近踩了个坑，因为鼠标点击与触屏在坐标获取上有些不一样，再加上pageX/Y与clientX/Y的些许不一样，再加上html底部没有固定。。。。导致画线的时候偏移了。。。

=￣ω￣=使用鼠标事件在canvas画布上画画，非常容易就能获取到画布上的坐标，使用（e.offsetX，e.offsetY）就行了。

=￣ω￣=但是，触摸事件就不一样了，它并没有提供这两个便捷的参数，所以你必须去计算画布上的坐标。
原理：【页面上的坐标】-【画布左上角的坐标】=【画布上的坐标】

ps：获取画布坐标方法
let vertex = document.getElementById('canvas').getBoundingClientRect();

=￣ω￣=最开始是使用pageX/Y来获取的，但是问题就来了，如果你页面底部没有固定，就会导致当你下拉到底部时，页面的底部悬浮在整个浏览器底部上方，这时你在canvas画布上画画就会出现偏移。
原因：pageX/Y是在clientX/Y的基础上加上了滚动条的距离，而额外加上的距离就是偏移的大小。

解决方案：使用clientX/Y来计算画布上的坐标
let x = e.originalEvent.changedTouches[0].clientX-vertex.left;
let y = e.originalEvent.changedTouches[0].clientY-vertex.top;

总结：如果页面底部固定在浏览器底部，使用pageX/Y来计算画布上的坐标也是可以的，而且不会发生偏移问题。

总结

以上是生活随笔为你收集整理的触屏版canvas画布实现touch坐标计算(坐标偏移问题)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。