文字不支持渐变色

[Albert/袁悦]

有办法让文字有渐变色吗？

以下是测试代码，效果是只有 Rect 支持线性和径向渐变填充，Text 不支持，填充黑色：

var zr = zrender.init(document.getElementById('canvas'));

// var gradient = new zrender.LinearGradient(0, 0, 1, 0, [
//     { offset: 0, color: 'red' },
//     { offset: 0.25, color: 'orange' },
//     { offset: 0.5, color: 'yellow' },
//     { offset: 0.75, color: 'green' },
//     { offset: 1, color: 'blue' }
// ], false);

var gradient = new zrender.RadialGradient(
    0.5,
    0.5,
    0.5, [
    { offset: 0, color: 'red' },
    { offset: 0.25, color: 'orange' },
    { offset: 0.5, color: 'yellow' },
    { offset: 0.75, color: 'green' },
    { offset: 1, color: 'blue' }
]

)

var text = new zrender.Text({
    style: {
        text: 'Hello World',
        // fill: 'red',
        textBorderColor: gradient,
        fontSize: 50,
        fontWeight: 600,
        stroke: "red",
        lineWidth: 10,
    },
    x: 100,
    y: 100,
    draggable: true,
});

zr.add(text);

var rect = new zrender.Rect({
    shape: {
        x: 0,
        y: 0,
        width: 100,
        height: 100,
    },
    style: {
        fill: gradient,
        stroke: "#000",
        lineWidth: 10,
    },
    draggable: true,
});

zr.add(rect)

zr.on('error', function (e) {
    console.error(e);
});

[Jancheng]

这是来自QQ邮箱的假期自动回复邮件。   您好，我已经收到你的邮件，我将仔细阅读来信，祝君身体健康，合家美满！

[Wenli Zhang]

Canvas 的文字无法支持渐变色，所以应该 ZRender 也实现不了

[Albert/袁悦]

Canvas 的文字无法支持渐变色，所以应该 ZRender 也实现不了

我测试了下，现在的canvas应该支持的：

ctx.font = "48px serif";
ctx.textBaseline = "hanging";
var gradient=ctx.createLinearGradient(0, 0, canvas.width,0);
gradient.addColorStop("0", "orange");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
ctx.fillStyle = gradient;
ctx.fillText("have a nice day ", 10, 100);

[Wenli Zhang]

哦这样的话技术上是可行的，但 ZRender 主要就是为 Apache ECharts 服务的，一般是图表里面有强需求了才会在 ZRender 层面支持

[Albert/袁悦]

好的，谢谢，希望后面能有这个功能吧