背景:最近踩了个坑,因为鼠标点击与触屏在坐标获取上有些不一样,再加上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来计算画布上的坐标也是可以的,而且不会发生偏移问题。