canvas绘图前必须设置width/height属性，不能仅靠css缩放；响应式需用js监听resize并同步更新宽高；动画要用requestanimationframe时间戳计算delta；扇区点击检测须用getboundingclientrect和坐标变换；移动端需禁用touch-action并处理touch事件。
Canvas绘图前必须设置width/height属性，不能只靠CSS缩放
直接用CSS给<canvas></canvas>加width: 300px; height: 300px;只会拉伸画布，导致图形模糊、点击区域错位。Canvas的绘图坐标系由canvas.width和canvas.height这两个DOM属性决定，不是CSS样式。
实操建议：
- 在HTML中显式写死
<canvas id="wheel" width="600" height="600"></canvas> - 或用JS初始化时赋值：
canvas.width = 600; canvas.height = 600; - 如需响应式，用JS监听
resize并同步更新canvas.width/canvas.height，再重绘整个转盘 - 绘制文字时注意：CSS缩放会改变
ctx.font渲染效果，字体发虚、抗锯齿异常很常见
点击旋转后停不稳？重点检查requestAnimationFrame中的时间差计算
常见错误是用Date.now()或performance.now()简单相减来算delta，但Canvas动画依赖的是帧间真实耗时，必须用requestAnimationFrame传入的时间戳做差值。
实操建议：
- 不要自己维护计时器：
setInterval(() => { rotate += 5; }, 30)不可靠，帧率抖动会导致转速跳变 - 正确方式：在RAF回调里接收
timestamp参数，与上一帧lastTime相减得deltaTime，再按角速度（如degPerMs = 0.05）累加角度 - 减速阶段要用缓动函数，比如
easeOutCubic(t) = 1 - Math.pow(1 - t, 3)，否则会“硬刹”停在非目标格子上 - 最终停止角度必须对扇区角度取模并四舍五入到最近扇区中心，避免视觉偏差
扇区点击检测不能靠event.offsetX/Y，要用坐标变换反推
用户点击Canvas时，event.offsetX和event.offsetY在不同浏览器行为不一致（Safari不支持），且受CSS缩放、父容器padding/border干扰，直接用于扇区判断必然出错。
实操建议：
- 用
canvas.getBoundingClientRect()获取Canvas左上角在视口中的真实位置 - 用
event.clientX - rect.left和event.clientY - rect.top算出相对于Canvas左上角的像素坐标 - 把该点转换为以Canvas中心为原点的极坐标：
dx = x - centerX; dy = y - centerY; angle = Math.atan2(dy, dx); radius = Math.sqrt(dx*dx + dy*dy) - 再根据
angle落在哪个区间、radius是否小于转盘半径，确定是否点中有效扇区
移动端触摸事件没响应？记得禁用默认行为并处理touchstart/touchend
Canvas在iOS/Android上默认不触发click，且touchstart会触发页面滚动或缩放，导致抽奖按钮失灵。
实操建议：
- 给
<canvas></canvas>加style="touch-action: none;"阻止系统手势 - 监听
touchstart而非click，并在事件处理器中调用event.preventDefault() - 触摸点坐标要用
event.touches[0].clientX，不是event.clientX - 为防误触，可加最小触摸持续时间（如50ms）或移动距离阈值（
Math.hypot(dx, dy) 才视为点击）
Canvas转盘最麻烦的从来不是画几个扇形，而是坐标系、事件坐标、动画时序三者对不齐——哪怕只错一个像素、一毫秒、一个getBoundingClientRect()没调，都会让指针停偏、点不中、转飞掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
