用Canvas实现动态万圣节南瓜灯：先绘制带波浪边缘和藤蔓的橙色南瓜轮廓，再用'destination-out'模式镂空鬼脸，叠加随鼠标移动与正弦抖动的径向光晕，最后添加摇晃动画和点击音效。
用 Canvas 实现动态万圣节南瓜灯，核心是“绘制可交互的镂空图案 + 实时光影响应”。不需要复杂框架，纯 HTML5 + JavaScript 就能做出点击切换表情、鼠标悬停发光、摇晃动画等效果。
1. 搭建基础 Canvas 画布与南瓜轮廓
先在 HTML 中定义画布，并用 arc() 和 bezierCurveTo() 绘制南瓜主体——注意南瓜不是正圆，要带轻微波浪形边缘和顶部藤蔓。用 fillStyle = '#FF8C00' 填充橙色，再用 stroke() 加深轮廓线模拟刻痕感。
- 设置 canvas 宽高为 400×400，用 ctx.scale(1.2, 1) 拉宽南瓜，更显憨厚
- 藤蔓用三次贝塞尔曲线画出自然弯曲，末端加小卷曲（用短弧线）
- 保存初始南瓜图形到 offscreenCanvas 或 ImageData，后续用于快速重绘底图
2. 刻出“鬼脸”：用 globalCompositeOperation 实现镂空
真正的南瓜灯关键在“透光的脸”。不要用 erase 模式（不兼容旧版 Safari），而是用 globalCompositeOperation = 'destination-out' 在已填充的橙色区域上“挖洞”：
- 先 fillRect(0,0,canvas.width,canvas.height) 铺黑背景（模拟暗室）
- 再绘制完整南瓜（橙色填充）
- 切换 composite 模式为 'destination-out'，用 arc() 或 beginPath()+moveTo+lineTo 绘制眼睛、鼻子、嘴巴路径，fill() 即可“擦除”出透明区域
- 每种表情（吓人/搞怪/眨眼）预存一组路径坐标，点击按钮时清空再重绘对应镂空
3. 添加动态光照与交互反馈
让“灯”真正亮起来：在镂空区域内部叠加柔和的渐变光晕，并随鼠标移动实时偏移，模拟烛光晃动：
立即学习“前端免费学习笔记（深入）”；
- 用 createRadialGradient(x, y, 0, x, y, 30) 创建黄色→透明径向渐变，fillStyle 设为该渐变
- 监听 mousemove，根据鼠标相对于 canvas 的位置，微调光晕中心坐标（±5px 范围），再 clearRect 重绘光晕层
- 添加 requestAnimationFrame 循环，在光晕上叠加轻微正弦抖动（y += Math.sin(Date.now()/200)*1.2），模拟烛火跳动
4. 增强沉浸感：摇晃动画与音效触发
南瓜微微左右摇摆，配合点击时的“噗嗤”声效，大幅提升节日感：
- 用 transform: rotateZ() CSS 动画或 Canvas 的 save()/rotate()/restore() 实现 ±3° 摇晃，周期约 4 秒
- 点击南瓜时触发 AudioContext 播放短促气流音效（可用 Web Audio API 合成 100ms 的低频噪声脉冲）
- 为提升响应，给 canvas 外层加 cursor: pointer 和 user-select: none
整个过程不依赖外部库，所有代码可压缩在 300 行内。重点在于分层绘制（底图/镂空/光晕/动画）和合理复用 canvas 状态，避免频繁 clearRect 全屏刷新。用户点击切换表情时，只重绘镂空路径层，其余保持不动，流畅度就有保障。
