canvas绘制带阴影文字需正确设置shadowcolor、shadowoffsetx/y和shadowblur三要素，并明确textbaseline以控制阴影起始位置；默认alphabetic基线最常用，绘制前save、后restore可避免属性污染。
Canvas 中绘制带阴影的文字，关键在于正确设置 shadowColor、shadowOffsetX/Y 和 shadowBlur，同时理解文本基线（textBaseline）对文字垂直对齐的影响——它直接决定阴影相对于文字的起始位置，稍不注意就会导致阴影“飘”或“压”住文字。
阴影三要素：颜色、偏移、模糊
Canvas 的文字阴影由三个属性共同控制，缺一不可：
-
shadowColor：必须显式设置非透明色（如
'rgba(0,0,0,0.3)'），默认为全透明，不设则无阴影； -
shadowOffsetX / shadowOffsetY：以像素为单位的偏移量，正值向右/下，负值向左/上；例如
ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2;生成右下角阴影； - shadowBlur：模糊半径，值越大越弥散（注意不是“大小”，而是高斯模糊程度），0 表示无模糊（锐利边缘阴影），通常设为 2–8 之间较自然。
textBaseline 决定阴影锚点位置
Canvas 文字绘制时，ctx.textBaseline 指定了文本“对齐基准线”。阴影始终从这条基线出发计算偏移，而不是从字形顶部或底部。常见取值及影响：
-
'alphabetic'（默认）：基线对齐英文字母底部（如 “x” 的底边），中文通常也按此对齐，适合大多数场景； -
'top'：基线在文字最顶端，此时shadowOffsetY = 2会让阴影落在文字正下方，但文字本身会“下沉”，需配合y坐标上调； -
'middle'：基线在文字整体高度中点，适合居中布局，但阴影偏移需按实际视觉预期微调； - 若未重置，多次绘制不同 baseline 的文字可能造成阴影错位，建议每次绘制前明确设置。
避免阴影干扰文字本身的技巧
阴影过重或偏移不当容易盖住文字主体，尤其小字号或浅色文字：
- 优先使用半透明阴影色（如
'rgba(0,0,0,0.2)'），而非纯黑； - 小字号文字慎用大
shadowBlur（建议 ≤3），否则边缘发虚； - 可叠加多层阴影模拟真实光照：先设浅色小偏移阴影（如右上），再设深色大偏移阴影（如右下），注意调用顺序和清空（
ctx.shadowColor = 'transparent'或重置为默认）； - 绘制前保存上下文状态（
ctx.save()），绘制后恢复（ctx.restore()），防止阴影属性污染后续绘图。
一个实用示例：清晰可读的标题文字
以下代码绘制一行居中、带柔和右下阴影的标题：
ctx.save();
ctx.font = 'bold 24px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'alphabetic'; // 明确基线
ctx.fillStyle = '#333';
// 阴影设置
ctx.shadowColor = 'rgba(0,0,0,0.15)';
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
ctx.shadowBlur = 3;
ctx.fillText('Hello Canvas', canvas.width / 2, 100);
ctx.restore(); // 清除阴影，不影响后续绘制
