背景：最近踩了個坑，因為鼠標點擊與觸屏在坐標獲取上有些不一樣，再加上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坐标计算(坐标偏移问题)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。