Javascript 如何在html5画布上绘制带有渐变的曲线路径？

使用javascript，我在canvas元素上绘制了一条“弯曲”路径，该路径由许多小的直线段组成

现在我希望每个部分都有不同的颜色，沿着路径应用彩虹颜色。 因此路径从红色开始，然后逐渐变为黄色，然后变为绿色，等等

我只想使用

beginPath（）

和

closePath（）

一次来加快速度。

---

对于像

createLinearGradient（）这样的函数，这可能吗或任何其他标准函数，只要速度快，因为整个路径每秒需要重新绘制多次。
除了分离路径之外，没有其他方法可以做到这一点。这是我为您的李萨如图形实现的彩虹渐变。您可以看到一个演示：

drawLissajous:函数（点）{
如果（点长度>2）{
变量x，y，x=点[1][0]+此.centerX；
y=点[1][1]+此.centerY；
ctx=canvas.getContext（'2d'）；
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.moveTo（x，y）；
对于（变量计数=2；计数
我有同样的问题，我做了一个简单的测试，结果很好
只需使用法向梯度，希望有用

 var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo(100, 20);

    // line 1
    context.lineTo(200, 160);

    // quadratic curve
    context.quadraticCurveTo(230, 200, 250, 120);

    // bezier curve
    context.bezierCurveTo(290, -40, 300, 200, 400, 150);

    // line 2
    context.lineTo(500, 90);

    // create radial gradient
    var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
    // light blue
    grd.addColorStop(0, '#8ED6FF');
    // dark blue
    grd.addColorStop(1, '#004CB3');

    context.lineWidth = 5;
    context.strokeStyle = grd;
    context.stroke();

请发布您当前使用的代码。@另外，粘贴代码似乎不起作用。。。但是我想你已经找到了我正在使用的代码，非常感谢，这就是我正在寻找的。速度仍然很高，这使我感到惊讶。穿过彩虹颜色的好方法@埃斯格：没问题。您还可以尝试使用正弦函数：例如，您可以通过为每个波指定单独的频率来调整模式。或者你可以通过减少最后加上的常数来减少图案的红色。这是错误的。您正在创建一个叠加在直线上的径向渐变，而不是沿着直线的渐变。
 var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo(100, 20);

    // line 1
    context.lineTo(200, 160);

    // quadratic curve
    context.quadraticCurveTo(230, 200, 250, 120);

    // bezier curve
    context.bezierCurveTo(290, -40, 300, 200, 400, 150);

    // line 2
    context.lineTo(500, 90);

    // create radial gradient
    var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
    // light blue
    grd.addColorStop(0, '#8ED6FF');
    // dark blue
    grd.addColorStop(1, '#004CB3');

    context.lineWidth = 5;
    context.strokeStyle = grd;
    context.stroke();