Canvas绘制渐变文字的核心是将线性渐变对象赋给fillStyle再用fillText填充，关键三步：调用createLinearGradient定义方向、addColorStop设置颜色节点、fillStyle赋值后fillText渲染；需注意坐标对齐、字体显式设置及canvas尺寸正确初始化。
关键三步：创建、定义、填充
整个流程只有三个不可跳过的环节：
-
调用
createLinearGradient(x0, y0, x1, y1)：传入起始点和结束点坐标，决定渐变方向（比如从左到右、从上到下）；坐标必须基于画布像素值，不是 CSS 单位或 upx（在小程序中需转换单位，如uni.upx2px()） -
用
addColorStop(offset, color)添加颜色节点：offset 是 0～1 的小数，表示渐变路径上的位置比例（0 是起点，1 是终点），color 支持十六进制、rgb、rgba 等标准格式 -
将渐变对象赋给
ctx.fillStyle，再调用fillText(text, x, y)：注意 y 是文字基线位置，不是顶部；若文字显示偏高，可适当增大 y 值（如加 10～15px 补偿）
常见方向与坐标设置技巧
渐变方向由两点坐标决定，选对坐标才能达到预期效果：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
-
从左到右渐变：起点 x 小、终点 x 大，y 相同，例如
createLinearGradient(0, 50, 300, 50)（假设文字宽约 300px，垂直居中在 y=50） -
从上到下渐变：x 相同，y 递增，例如
createLinearGradient(100, 0, 100, 80)（适合竖排或单行标题） -
贴合文字长度动态计算：用
ctx.measureText(text).width获取实际宽度，避免渐变区域过短导致颜色断层。例如：const width = ctx.measureText("Hello").width;const grad = ctx.createLinearGradient(0, 0, width, 0);
容易踩的坑
写出来没效果？大概率卡在这几个细节上：
- fillStyle 赋值后才调用 fillText：如果先写文字再设渐变，文字会按默认黑色绘制，渐变无效
-
坐标未对齐文字位置：渐变区域和文字区域错位，会导致颜色只覆盖部分文字（建议先用
strokeRect()框出文字区域调试） -
未设置字体大小和样式：`fillText` 不继承 CSS 字体，必须显式设置
ctx.font = "bold 28px sans-serif"，否则可能极小或不显示 -
canvas 尺寸未正确初始化：用 CSS 设置宽高会拉伸画布，应直接设 canvas 元素的
width和height属性，或用getBoundingClientRect()动态适配
替代方案：CSS 实现更轻量
如果只是静态展示、不需要动画或精确控制，CSS 方案更简单稳定：
- 给文字容器加类：
.gradient-text { background: linear-gradient(45deg, #ff6b6b, #4ecdc4); -webkit-background-clip: text; background-clip: text; color: transparent; } - 优势：无需 JS、响应式友好、支持伪元素和过渡动画
- 限制：不适用于需要离屏渲染、导出图片或与 Canvas 图形联动的场景
