0

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

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

我想使用beginPath()and closePath()only 一次来加快速度。这是否可以使用类似功能createLinearGradient();或任何其他标准功能，只要它很快，因为整个路径需要每秒重绘多次。

4

2 回答 2

1

除了分隔路径之外，没有其他方法可以做到这一点。这是我为您的 lissajous 人物实现的彩虹渐变。你可以在这里看到一个演示：

drawLissajous: function(points) {
    if (points.length > 2) {
        var x, y, x = points[1][0] + this.centerX;
        y = points[1][1] + this.centerY;
        ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.moveTo(x, y);
        for (var count = 2; count < points.length; count++) {
            ctx.beginPath();
            ctx.moveTo(x, y);
            var newX = points[count][0] + this.centerX,
                newY = points[count][1] + this.centerY,
                f = 0.005,
                blue = Math.sin(f * count + 0) * 127 + 128,
                red = Math.sin(f * count + 2) * 127 + 128,
                green = Math.sin(f * count + 4) * 127 + 128;
            ctx.strokeStyle = 'rgb(' + Math.round(red) + ', ' + Math.round(green) + ', ' + Math.round(blue) + ')';
            x = newX;
            y = newY;
            ctx.lineTo(x, y);
            ctx.stroke();
            ctx.closePath();
        }
        ctx.stroke();
        ctx.closePath();
    }
}
于 2013-01-02T02:07:26.027 回答
-1

我有同样的问题，我做了一个简单的测试，它只是使用正常的渐变，希望它有用

 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();

这里测试

于 2013-11-16T14:24:03.320 回答