Canvas绘制渐变文字需统筹定位、渐变与轮廓：先用font/textAlign/textBaseline精准定位文字；再通过createLinearGradient和addColorStop配置渐变填色；最后用strokeText+fillText双渐变描边填充，且须确保字体加载完成后再绘制。
Canvas 绘制带渐变的文字艺术，核心在于把渐变“装进文字里”，而不是给文字加一层滤镜。关键不是炫技，而是控制好三件事：文字怎么站（定位）、颜色怎么流（渐变）、边线怎么立（轮廓）。
文字定位要稳：font、textAlign 和 textBaseline 缺一不可
字体样式必须提前设好，比如 ctx.font = "bold 48px 'Inter', sans-serif"；漏掉这句，后面再花哨的渐变也压不住默认字体的丑。水平对齐用 ctx.textAlign = "center"，垂直基准线推荐 ctx.textBaseline = "middle"——这样把坐标定在画布中心 (canvas.width / 2, canvas.height / 2)，文字就真正居中了。若用 top 或 alphabetic，y 坐标得额外加减 10–20 像素才能对齐，容易偏。
渐变不是贴图，是“填色工具”
Canvas 不支持直接给文字加 CSS 式渐变背景，而是靠 fillStyle 接收一个渐变对象。分两步走：
- 先调 ctx.createLinearGradient(x0, y0, x1, y1) 定方向：横向渐变常用
(0, y, canvas.width, y)；想让渐变紧贴文字区域，可先ctx.measureText(text)拿到宽度，再设区间为(x, y - 8, x + width, y + 8) - 再用 addColorStop(0, "#ff6b6b") 和 addColorStop(1, "#4ecdc4") 插入起止色。支持三个及以上节点，比如
0.3处加个亮黄，过渡更灵动
描边+填充双渐变：轮廓不糊，层次才立得住
只填色太单薄，加描边才有“艺术字”的筋骨。重点是描边和填充可以各自配不同渐变，互不干扰：
- 描边用线性渐变：起点橙、终点青，ctx.strokeStyle = strokeGrad，再设 ctx.lineWidth = 2.5
- 填充用径向渐变：中心白、边缘蓝，ctx.fillStyle = fillGrad
- 顺序不能错：先 strokeText(text, x, y)，再 fillText(text, x, y)，两个坐标必须完全一致，否则轮廓漂移
别让字体拖后腿：加载完成再动笔
用了 Google Fonts 或 Inter 这类自定义字体，Canvas 不会等它加载完。直接绘制，大概率回退成 Times New Roman，排版全乱。稳妥做法是：
- 用 document.fonts.load("48px 'Inter'") 监听加载
- 在 .then() 回调里执行绘制逻辑
- 或加兜底判断：
ctx.measureText("测").width 就说明字体没加载好，暂停绘制
不复杂但容易忽略：渐变是填色方式，描边是另一套路径，字体是前提条件——三者拧成一股劲，文字才真正活起来。
