HTML5 Canvas沙画特效是受物理约束的粒子系统：沙粒以1–3像素矩形模拟颗粒感，受重力、弱反弹、邻近吸附和横向扰动驱动；支持剪辑轮廓、鼠标撒沙/刮沙交互；通过禁用抗锯齿、深灰渐变背景与半透明残影实现艺术化颗粒质感。
要用HTML5 Canvas实现动态颗粒感的沙画艺术特效，核心不是“画一幅静止的沙画”，而是模拟沙粒在重力、碰撞、风力或触控扰动下的自然流动与堆积过程——它本质是一个受物理约束的粒子系统，叠加了沙粒质感、边界吸附和视觉降噪处理。
1. 沙粒建模：用轻量粒子代替真实沙子
每个“沙粒”用一个对象表示，但不追求物理精度，而强调视觉颗粒感：
- 位置（x, y）和速度（vx, vy），初始随机散布在画布上半部
- 大小设为 1–3 像素，避免统一圆点；可用
ctx.fillRect(x, y, size, size)或极小的ctx.arc配合shadowBlur模拟柔边沙粒 - 颜色推荐低饱和度棕灰系，如
"#8B4513"、"#A0522D"，并允许轻微随机偏移（hsl(30, 20%, 40% + Math.random()*10%)） - 增加“堆积状态”属性：当粒子y坐标接近底部或邻近已有静止粒子时，设
isSettled = true，停止下落并略微扩大半径（模拟压实感）
2. 沙流动态：简化但可信的物理逻辑
不用完整物理引擎，几行关键规则即可营造沙感：
-
重力主导：每帧
vy += 0.1（可调） -
地面/堆顶反弹：若
y > canvas.height - 2，设y = canvas.height - 2且vy *= -0.3（弱反弹，体现沙的阻尼） -
邻近吸附：对每个未静止粒子，扫描附近 15px 内已静止粒子，若有，则缓慢向其重心偏移（
x += (targetX - x) * 0.02），形成自然聚堆 -
横向扰动：添加微弱随机水平加速度（
vx += (Math.random() - 0.5) * 0.05），避免直线堆叠，增强“流沙”错觉
3. 沙画边界与交互：让沙真正“落在画布上”
纯自由下落太单调。加入可控边界，才能构成“沙画”：
- 预定义一个沙画轮廓路径（比如用
ctx.beginPath(); ctx.ellipse(...); ctx.clip();），所有沙粒只在该剪辑区域内运动和堆积 - 支持鼠标/触摸拖拽：按下时，在接触点周围生成新沙粒，并赋予向外散射初速度；移动时持续撒沙（类似沙画笔刷）
- 添加“刮沙”功能：按住 Shift 键 + 鼠标移动，擦除路径上的静止沙粒（设
isSettled = false并给向上初速度），模拟真实刮板效果
4. 视觉优化：强化颗粒感与艺术氛围
Canvas 默认渲染太“干净”，需主动“做旧”：
- 禁用抗锯齿：
ctx.imageSmoothingEnabled = false，保持像素级锐利颗粒边缘 - 背景用深灰渐变（
linearGradient(0,0,0,canvas.height)从 #1a1a1a 到 #0d0d0d），衬托沙粒 - 每帧绘制前，用半透明黑色覆盖全画布（
ctx.fillStyle = "rgba(0,0,0,0.03)"; ctx.fillRect(0,0,w,h)），制造缓慢消散的余痕，模拟沙粒沉降后的微尘浮悬 - 可选：叠加一层极低透明度（0.005）、缓慢平移的噪点纹理 canvas（离屏绘制），增强模拟胶片颗粒感
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
