HTML5 Canvas触摸事件处理及移动端绘图功能异常求助
帮你揪出Canvas触摸设备异常的关键点
兄弟,太懂这种桌面端完美、触摸端拉胯的糟心感了——卡两天确实够闹心的!触摸设备和桌面的事件逻辑差异不小,大概率是事件处理或者适配的问题,你得补充点细节我才能精准帮你定位:
- 先说说具体啥异常?是画出来的线飘了、断了,还是触摸完全没反应?有没有特定的触发场景?
- 把你处理触摸事件的核心代码贴出来呗?比如
touchstart、touchmove这些事件的处理逻辑,还有你怎么把触摸坐标转换成Canvas坐标的? - 你的Canvas尺寸是怎么设置的?有没有考虑过触摸设备的
devicePixelRatio?这个很容易导致坐标错位 - 有没有测过不同触摸设备?比如iOS和Android上的表现是不是一样的?有些浏览器的触摸事件坑不一样
- 有没有在触摸事件里加
event.preventDefault()?有时候浏览器的默认滚动、缩放行为会抢Canvas的事件,干扰绘图
要是能把相关的核心代码片段(比如事件绑定、绘图的关键部分)贴出来,排查起来效率会高很多!
内容的提问来源于stack exchange,提问作者Sathya




