Canvas绘制阴影需同时设置shadowColor、shadowOffsetX、shadowOffsetY、shadowBlur四属性，缺一不可；阴影在fill()或strokeText()调用时生效，且持续影响后续图形，需手动重置。
Canvas 绘制带阴影的几何图形，关键不是“加特效”，而是正确设置四个阴影属性，并在绘制前完成配置。阴影不会自动出现，颜色必须显式指定，否则偏移和模糊都无效。
阴影四要素必须配齐
Canvas 阴影由以下四个属性共同控制，缺一不可：
-
shadowColor：必须设为合法 CSS 颜色值，推荐用
rgba()控制透明度（如"rgba(0,0,0,0.4)"），纯色值（如"#000"）会遮盖过重 -
shadowOffsetX / shadowOffsetY：单位像素，正值向右/下偏移，负值向左/上；常用组合是
(2, 2)、(4, 4)模拟自然光源角度 -
shadowBlur：决定边缘柔和程度，0 是硬边投影（像印章），一般取
2–12即可，超过 20 容易发虚且影响性能
矩形、圆形等基础图形加阴影
只要在调用 fill() 或 stroke() 前设置好阴影属性，后续绘制就会自动带影。注意：这些设置是“持续生效”的，会影响之后所有图形，除非手动重置。
示例：画一个带阴影的绿色矩形和蓝色圆
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
立即学习“前端免费学习笔记（深入）”；
const ctx = canvas.getContext('2d');
ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 6;
<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(); // 这个圆也带同样阴影
文本阴影要特别注意触发时机
文本阴影靠 fillText() 或 strokeText() 触发，不是靠 font 或 textAlign。常见错误是设了阴影却没调用这两个方法，结果什么都没显示。
- 想让某段文字有影？设置完阴影后直接调用
fillText() - 想让下一段文字无影？先执行
ctx.shadowColor = ''清空颜色（设为null或透明色也行） - 避免误影响：如果只给文字加影，建议用
save()/restore()包裹，或手动重置四个属性
外阴影 vs 内阴影
Canvas 原生只支持外阴影。内阴影需借助合成模式模拟：
- 外阴影：正常设置
shadowOffsetX/Y不为零即可，最常用 - 内阴影：先画一个稍大的带阴影图形，再用
globalCompositeOperation = 'destination-out'在其上“挖掉”主体区域，留下仅在内部边缘扩散的阴影 - 更稳妥做法：用两层 Canvas，底层绘阴影并裁剪，顶层绘主体，逻辑清晰不易出错
