Canvas阴影由shadowColor、shadowOffsetX、shadowOffsetY和shadowBlur四个属性控制，需显式设置颜色才生效；矩形与路径在fill()/stroke()前设阴影即可，文本用fillText()/strokeText()触发，注意及时清空shadowColor避免误影响。
Canvas 中的阴影效果通过四个属性控制：shadowColor、shadowOffsetX、shadowOffsetY 和 shadowBlur。只要设置合理，图形和文本都能自然呈现立体感，无需额外图层或 CSS。
设置阴影参数的基本规则
阴影不是自动开启的——必须显式指定颜色，否则即使设置了偏移和模糊，也看不到效果。常用组合如下：
-
shadowColor：必须是合法 CSS 颜色值（如
"rgba(0,0,0,0.5)"），透明度建议用 rgba 控制，避免遮盖主体 -
shadowOffsetX / shadowOffsetY：单位为像素，正值向右/下偏移，负值向左/上；通常用
(2, 2)或(4, 4)模拟自然光源 - shadowBlur：值越大边缘越柔和，一般 0–20 足够；设为 0 时是硬边投影（类似“印痕”）
为矩形与路径图形添加阴影
在调用 fill() 或 stroke() 前设置阴影属性即可生效，且只影响后续绘制内容：
const ctx = canvas.getContext('2d');
ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 4;
<p>// 此矩形会带阴影
ctx.fillStyle = '#4CAF50';
ctx.fillRect(50, 50, 120, 80);</p><p>// 切换颜色后，阴影仍生效（除非重置）
ctx.fillStyle = '#2196F3';
ctx.beginPath();
ctx.arc(200, 100, 30, 0, Math.PI * 2);
ctx.fill();
</p>
为文本添加阴影更需注意顺序与重置
文本阴影易被忽略两点：一是 fillText() / strokeText() 才触发渲染，二是若后续图形不需要阴影，必须手动清空，否则持续影响：
- 设置阴影后调用
fillText()即可，字体样式（font、textAlign等）独立控制 - 想让部分文字无阴影？在绘制前将
shadowColor设为空字符串：ctx.shadowColor = '' - 常见误操作：在
save()/restore()外修改阴影，导致后续所有绘制意外带影
性能与兼容性提醒
阴影计算由浏览器合成器处理，大量高频绘制（如动画帧）中开启 shadowBlur > 0 可能轻微影响性能。低端设备建议 blur ≤ 8。所有现代浏览器（含移动端 Safari、Chrome、Firefox）均完整支持 Canvas 阴影，IE9+ 支持但不支持 shadowColor 的半透明值（需降级为纯黑/灰）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
