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() 可用来获取文字宽度，辅助手动居中或对齐排版
- 抗锯齿开启时问题更隐蔽，但原理不变——描边被覆盖的本质没变，只是像素混合掩盖了边界
