canvas压感需动态适配：chromium内核+触控笔时用e.pressure（0.0–1.0），须验证pointerdown/move、e.inputsource==='pen'且值可变；safari/ipad pencil等无pressure时fallback至touch.force或radiusx/radiusy；全平台兼容方案用速度模拟线宽，关键在平滑计算与策略预判。
Canvas 签名笔触粗细不能靠固定 lineWidth 实现，必须动态响应输入源特性——真实压感只在 Chrome/Edge（Chromium 内核）+ 触控笔组合下通过非标准 pressure 属性可用；其余场景需用速度、接触面积或倾斜角 fallback。
怎么判断当前设备是否真有 pressure 数据
别一上来就写 e.pressure，先验证是否存在且有意义：
- 必须用
pointerdown/pointermove，不是touchmove或mousemove - 检查
e.inputSource === 'pen'，排除鼠标/手指误判 - 打印事件对象，确认存在
pressure字段（范围 0.0–1.0），且值随按压力度明显变化 - iPad Pencil 在 Safari 中不暴露
pressure；Wacom 平板在 Chrome Windows 上通常支持
Chrome/Edge 下直接用 pointermove.pressure 控制线宽
这是目前最稳定、延迟最低的压感路径，但仅限 Chromium 内核浏览器：
-
const pressure = e.pressure ?? 0.5—— 必须加空值合并，防 undefined 导致 NaN - 映射公式建议用
lineWidth = Math.max(1, Math.min(20, pressure * 18 + 2))，避免过细（20px） - 不要在每次
pointermove都调beginPath()，应累积点序列再批量绘制，否则线条断裂 - 配合
ctx.lineCap = 'round'和ctx.lineJoin = 'round'消除生硬接头
没 pressure？用 touch.force 或 radiusX/radiusY fallback
移动端 Safari、Firefox 或部分 Android 浏览器不支持 pressure，但 TouchEvent 可能提供替代信号：
-
touch.force（iOS Safari 支持，范围 0–1）比radiusX更接近压力语义 -
touch.radiusX和touch.radiusY表示接触椭圆半径，可合成面积估算：const area = touch.radiusX * touch.radiusY - fallback 逻辑要兜底：
const pressure = touch.force ?? Math.sqrt(touch.radiusX * touch.radiusY) / 50 ?? 0.5 - 注意：所有 TouchEvent 必须加
{ passive: false }并在touchmove中调e.preventDefault()，否则事件被拦截
纯速度模拟（全平台兼容，但体验略“假”）
当硬件和浏览器都不给压力数据时，这是唯一通用方案，关键在平滑与参数调校：
- 记录每个点的
x、y、timestamp，算出相邻点间速度：speed = Math.hypot(dx, dy) / deltaTime - 线宽公式推荐：
lineWidth = Math.max(0.8, 3 - speed * 0.25)（快则细，慢则粗，上限封顶） - 跳过位移 100ms 的点单独处理（如起笔顿笔）
- 搭配
quadraticCurveTo插值三点成弧线，比lineTo更像毛笔提按
真正难的不是读 pressure，而是让不同设备、不同浏览器、不同输入源（笔/指/鼠）下的线宽过渡自然——同一支笔在 Chrome 和 Safari 上行为可能完全不同，必须在 pointerdown 时就探测并锁定 fallback 策略，而不是运行时反复判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
