0

javascriptを使用して、ここで多くの小さな直線セグメントで構成されるキャンバス要素に「曲線」パスを描画しています：ハーモノグラフ。

次に、各セグメントの色を変えて、パスに沿って虹の色を適用します。したがって、パスは赤で始まり、徐々に黄色に変わり、次に緑に変わります。

私は物事をスピードアップするために一度だけ使用beginPath()したいと思います。これは、パス全体を1秒間に何度も再描画する必要があるため、高速である限り、または他の標準関数のclosePath()ような関数で可能ですか。createLinearGradient();

4

2 に答える 2

1

パスを分離する以外にこれを行う方法はありません。これが、リサージュ図形のレインボーグラデーションの実装です。ここでデモを見ることができます：

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 に答える