Node.js 如何在画布节点中创建渐变文本？

我试图使用canvas在节点上创建渐变文本，我测试了下面的代码，这是一个重新实现，我收到了一个错误

const fs=require（'fs'）；
常数{
createCanvas，
加载映像
}=需要（“画布”）；
const text=“梯度”；
const output=“./image.png”；
异步函数启动（文本、输出）{
让[宽度，高度]=[1280720]；
const canvas=createCanvas（宽度、高度）；
让context=canvas.getContext（“2d”）；
等待drawGradientText（文本）；
等待保存图像（输出）；
异步函数drawGradientText（文本）{
返回新承诺（（解决）=>{
context.font=“30px Verdana”；
//创建渐变
让gradient=context.createLinearGradient（0,0，canvas.width，0）；
渐变。添加颜色停止（“0”，“洋红色”）；
渐变。添加颜色停止（“0.5”，“蓝色”）；
渐变。添加颜色停止（“1.0”，“红色”）；
//用梯度填充
context.fillStyle=渐变；
上下文。填充文本（文本，10，90）；
解决（）；
})
}
函数saveImage（输出）{
返回新承诺（（解决）=>{
const buffer=canvas.toBuffer（'image/png'）；
fs.writeFileSync（输出，缓冲区）；
解决（）；
})
}
}
开始（文本、输出）；

控制台显示

TypeError: offset required

(node:18932) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch()...

---

如何在nodejs上创建文本渐变？

与浏览器不同，节点画布对于作为偏移量传递给

addColorStop（偏移量，颜色）

的类型非常严格
他们不会将其类型转换为float，只会抛出您收到的错误，如图所示

可以说，这是一个互操作问题，他们可能想解决它，但即使在浏览器中，此偏移量也应该是一个数字，因此传递数字，而不是字符串：

gradient.addColorStop(0, " magenta");

---

根据凯伊多的回答 我注意到必须以十六进制数字格式书写颜色。 代码现在如下所示：

const fs=require（'fs'）；
常数{
createCanvas，
加载映像
}=需要（“画布”）；
const text=“梯度”；
const output=“./image.png”；
异步函数启动（文本、输出）{
让[宽度，高度]=[1280720]；
const canvas=createCanvas（宽度、高度）；
让context=canvas.getContext（“2d”）；
等待drawGradientText（文本）；
等待保存图像（输出）；
异步函数drawGradientText（文本）{
返回新承诺（（解决）=>{
context.font=“30px Verdana”；
//创建渐变
让gradient=context.createLinearGradient（0,0，canvas.width，0）；
渐变。添加颜色停止（0，#004”）
渐变。添加颜色停止（0.5，#00fef3”）
context.fillStyle=渐变；
填充文本（文本，宽度/2-，高度/2）；
解决（）；
})
}
函数saveImage（输出）{
返回新承诺（（解决）=>{
const buffer=canvas.toBuffer（'image/png'）；
fs.writeFileSync（输出，缓冲区）；
解决（）；
})
}
}
开始（文本、输出）；

如果您尝试进行图像处理，我不建议您使用canvas，为什么不尝试使用此库：。我看过JIMP，它确实被广泛使用，甚至比节点环境中的canvas更广泛，但对于创建形状或文本处理等常见任务，它比canvas的复杂性更高。然而，我正在寻找一个工具来解决这个问题。顺便说一下，谢谢，苏，很高兴见到你