Canvas 文本描边与填充搭配：制作艺术字效果

Canvas实现带描边又带填充的艺术字，关键是先配置font、textAlign、textBaseline统一文字定位，再分别用不同渐变设置strokeStyle和fillStyle，严格按先strokeText后fillText顺序执行且y值一致。

Canvas 里实现带描边又带填充的艺术字，关键不是“先描边还是先填充”，而是让描边和填充各自用独立的样式、在同一坐标下按正确顺序执行。

字体与定位必须提前设好

文字位置和形态由 font、textAlign、textBaseline 共同决定，这些必须在绘制前统一配置，否则描边和填充容易错位：

• font 要写全，比如 "bold 48px 'Helvetica Neue', sans-serif"，避免浏览器默认值差异
• textAlign 设为 "center" 或 "left"，配合 x 坐标使用；居中时常用 canvas.width / 2
• textBaseline 推荐用 "alphabetic"（默认值），y 坐标含义稳定；若改用 "middle"，y 需调整为垂直中心点

描边与填充可用不同渐变

strokeStyle 和 fillStyle 可分别赋值不同的渐变对象，互不干扰：

• 描边用线性渐变：从左到右，起点橙红、终点青蓝
• 填充用径向渐变：中心亮白、边缘深蓝，模拟光晕感
• 两个渐变对象都需在对应绘制调用前创建并赋值，不能复用同一个渐变对象

必须先描边再填充

调用顺序直接影响视觉完整性：

• 先 strokeText(text, x, y)，再 fillText(text, x, y)，且两个 y 值完全一致
• 如果反过来，fillText 会覆盖描边靠近内侧约一半线宽，小字号配粗描边时尤其明显——边缘发虚、断开或变细
• lineWidth 不宜过大，12px 以上在 24px 字体上就易失真；需要厚重效果，可用偏移 ±0.5px 多次 strokeText 模拟

性能与细节优化建议

批量渲染或高频更新时，注意减少状态切换开销：

• 避免在循环中反复设置 font、fillStyle、strokeStyle；能复用就复用
• measureText() 可用来获取文字宽度，辅助手动居中或对齐排版
• 抗锯齿开启时问题更隐蔽，但原理不变——描边被覆盖的本质没变，只是像素混合掩盖了边界