Canvas paperjs：渐变笔划

我想画一个图（一条线），当值为0时它是蓝色的，当值为~100时它会变得更红（因此线的颜色必须是渐变色）

我有两个想法可能行得通，但也许有更好的解决办法

不要画一条线，而是在每个像素上画多个圆，并根据其x值为这些圆上色

将渐变放置在背景中，并将线条用作剪裁遮罩。这在paperjs中可能吗？如果可能，如何实现

虽然想法1。很容易实现，我不认为我会得到一个顺利的结果

---

如果您能给我一个更好的方法或一个如何使用线条作为剪切遮罩的示例，我将不胜感激。

请尝试下面的代码。使用值来获得您想要的结果。下面的代码将帮助您了解如何将渐变应用于直线

// Define two points which we will be using to construct
// the path and to position the gradient color:
var point1 = [0,350];
var point2 = [350, 0];

// Create a line between point1 and point2 points:
var path = new Path.Line({
    from: point1,
    to: point2,
    // Fill the line stroke with a gradient of two color stops
    strokeColor: {
    gradient: {
        stops: ['blue', 'red']
    },
            //origin and destination defines the direction of your gradient. In this case its vertical i.e bottom(blue/cooler) to up(red/warmer) refering to link you sent.
    origin: [0,200], //gradient will start applying from y=200 towards y=0. Adjust this value to get your desired result
    destination: [0,0]
},
    strokeWidth: 5
});

希望这能让你轻松一点

注: 您还可以更改上面给出的渐变中蓝色和红色的百分比，如下所示：

...
gradient: {
    // blue from 0% to 33%, mix between blue and red from 33% to 66%, and remaining red (66% to 100%)
    // mix between red and black from 20% to 100%:
    stops: [['blue',0.33], ['red',0.66]]
},
origin: [0,350],
destination: [0,0],
...

---

这并不考虑曲线的X值。还是我错过了什么？我想要这样的东西：我已经根据您的要求进行了更改。希望这能让你更接近解决你的问题。如果有帮助，请+1；）很抱歉，您的第一个和第二个解决方案都很好。@sohel:这是您的示例翻译为