如何在JavaScript HTML Canvas中实现仅允许Apple Pencil输入绘画

方案1：基于Touch事件的touchType属性判断（iOS专属适配） #

你之前用radiusX判断的方案不适配iPadOS，iOS Safari在Touch对象上暴露了touchType字段用于区分输入类型，直接判断即可：

• 取值为stylus：Apple Pencil输入
• 取值为direct：手指/手掌触摸输入
  代码示例：

canvas.addEventListener('touchstart', (e) => {
  const touch = e.targetTouches[0]
  // 仅允许Apple Pencil触发绘制逻辑
  if (touch.touchType !== 'stylus') return
  // 原有绘制起点逻辑
})
// touchmove、touchend事件同理添加相同判断即可

该方案兼容iOS 13及以上版本的iPadOS设备，覆盖目前绝大多数在役iPad。

方案2：基于Pointer API实现（跨设备通用，优先推荐） #

W3C标准Pointer API原生支持不同输入类型的区分，同时兼容Apple Pencil、三星S Pen等各类触控笔，还能统一处理触摸、鼠标、触控笔输入逻辑，适配性更强。
代码示例：

// 关闭触摸延迟，提升绘制流畅度
canvas.style.touchAction = 'none'

let isDrawing = false
canvas.addEventListener('pointerdown', (e) => {
  // 仅允许触控笔输入
  if (e.pointerType !== 'pen') return
  isDrawing = true
  // 绘制起点逻辑
})

canvas.addEventListener('pointermove', (e) => {
  if (!isDrawing || e.pointerType !== 'pen') return
  // 绘制过程逻辑
})

canvas.addEventListener('pointerup', (e) => {
  if (e.pointerType !== 'pen') return
  isDrawing = false
  // 绘制结束逻辑
})

canvas.addEventListener('pointercancel', () => {
  isDrawing = false
})

该方案兼容iOS 13.4+、安卓Chrome 55+，同时支持所有主流现代浏览器，不需要额外适配不同品牌的触控笔。

额外防误触优化 #

如果需要彻底屏蔽非Apple Pencil的输入对画布的影响，可以在判断到非stylus/pen类型的输入时调用e.preventDefault()，避免手掌触碰触发页面滚动等默认行为。

内容的提问来源于stack exchange，提问作者runnybams