Canvas不直接识别手势，需通过监听触摸事件、采集轨迹并用算法匹配；多点触控依赖touches数组及双点距离/角度变化；单指手势靠位移、速度、时间阈值区分滑动与点击；自定义手势需重采样与模板比对；选型依精度与兼容性权衡。
Canvas本身不直接识别手势，但它是实现手势交互最灵活的底层载体。真正起作用的是在Canvas上监听触摸事件、采集轨迹数据，并用算法做模式匹配或物理量计算。
多点触控是基础能力
Canvas支持标准触摸事件：touchstart、touchmove、touchend。关键在于正确处理touches数组——它实时记录所有接触点坐标。双指操作（如旋转、缩放）依赖两点间距离和角度的变化率，不是单点位移。
- touchstart时记录初始双点位置和距离
- touchmove中持续计算当前距离、连线角度、重心坐标
- 需调用event.preventDefault()阻止浏览器默认滚动或缩放
滑动与点击靠阈值判断
单指手势识别核心是区分“滑动”和“点击”。不能只看起点终点，还要考虑路径长度、移动速度和停留时间。
- 滑动判定：位移超过SwipeThreshold（如100px）且速度高于SwipeVelocityThreshold（如100px/s）
- 点击判定：位移小、时间短，且未触发滑动条件
- 长按通常设为500ms以上无移动
自定义手势依赖轨迹采样与匹配
画圈、对勾、三角等形状识别，本质是把用户笔迹转化为标准化点序列，再比对模板。
- 原始轨迹点密度不均，需重采样成固定数量点（如32个），消除手速影响
- 常用方法有归一化坐标、方向角序列、动态时间规整（DTW）比对
- App Inventor的CustomGestureDetector已封装这套流程，支持录制→保存→识别闭环
真实场景要兼顾性能与鲁棒性
MediaPipe这类方案把识别交给端侧AI模型，Canvas只负责渲染反馈；而轻量级方案则用纯JS做几何计算。选型取决于精度要求和兼容范围。
- 浏览器环境优先考虑MediaPipe Hands，可直接输出21个手部关键点
- 小程序或低配设备可用Canvas+简易算法，例如用指尖y坐标变化判断伸直/弯曲
- 无论哪种，都建议加置信度阈值（如minDetectionConfidence=0.7），避免误触发
