JS 如何在 canvas 中绘制渐变颜色的文字

最近自己实现了一个在 canvas 绘制渐变颜色的文字

实现说明：

CanvasRenderingContext2D 的颜色填充属性 fillStyle 可以通过 createLinearGradient() 与 createRadialGradient() 创建渐变颜色

填充颜色后调用 fillText() 即可绘制一个渐变颜色的文字。

效果展示：

第一行：线性渐变，从左到右；
第二行：线性渐变，从上到下；
第三行：径向渐变，由外向内；
第四行：径向渐变，由内向外；

完整代码链接：

转载自文章：在 JS 中使用 canvas 绘制渐变颜色的文字

线性渐变实现代码如下，点击上面链接查看完整代码

html

js

// 画布
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

// 文本基线设置为 "top"，方便文字定位时使用文字左上角进行定位，
// 且之后使用的获取文字占用高度的属性 actualBoundingBoxDescent
// 也需要此设置才能正确获取。
ctx.textBaseline = "top"
ctx.font = "bold 40px 'Fira Sans'"; //定义文字样式

// 提取文字占用宽高，渐变的范围就是通过文字的宽高来定义的
let textMetrics = ctx.measureText("阳光知道文字");
let text_width = textMetrics.width;
let text_height = textMetrics.actualBoundingBoxDescent;

// 定义渐变过度颜色
let colors = [
    "rgb(255, 149, 0)",//橙色
    "rgb(237, 176, 0)",
    "rgb(204, 204, 0)",
    "rgb(153, 230, 0)",
    "rgb(4, 255, 0)",  //绿色
];

/**
 * 获取一个线性渐变颜色
 * 参数 x0, y0, x1, y1 为 createLinearGradient 使用的参数
 * 参数 textX,textY 为文字绘制的位置
 */
function getLingrad(x0, y0, x1, y1,textX,textY){
    // 需要根据文字绘制的位置 (textX,textY) 偏移
    let gradient = ctx.createLinearGradient(
        x0+textX,
        y0+textY,
        x1+textX,
        y1+textY
    );
    colors.map((item,i) =>{
        //偏移值根据颜色个数平均分。
        gradient.addColorStop(i/(colors.length-1), item);
    })
    return gradient;
}

// 绘制文字，从左到右渐变
let textP = { x:0, y:0 };// 文字绘制的位置
ctx.fillStyle = getLingrad(0, 0, text_width, 0, textP.x, textP.y);
ctx.fillText("阳光知道文字", textP.x, textP.y);