html - 弧を描くと線形グラデーションhtml5キャンバスになります

Question

キャンバスに円弧を描いていますが、3色で線形グラデーションを与えることは可能ですか??

Answer 1

はい、可能です！ソースとしてキャンバス コンテキストを取得し、 、、、座標でcreateLinearGradient定義されたグラデーションを適用するという名前の Javascript のメソッドがあります。最初の 2 つのオプションは開始座標を定義し、最後の 2 つのオプションは終了座標を定義します。sxsydxdy

var gradient = context.createLinearGradient(sx, sy, dx, dy);

このメソッドを呼び出した後、次のメソッドを呼び出してキャンバスにグラデーション カラーを適用できますcolorStop。

gradient.addColorStop(0,   '#f00'); // red
gradient.addColorStop(0.5, '#ff0'); // yellow
gradient.addColorStop(1,   '#00f'); // blue

これらは、キャンバスにグラデーションを実装するための基本的な要素です。次のステップは、円形グラデーションが必要な場合、円形カラー グラデーションの位置を計算することです。これは、次の式で満たすことができます。

var applyAngle = function (point, angle, distance) {
    return {
          x : point.x + (Math.cos(angle) * distance),
          y : point.y + (Math.sin(angle) * distance)
    };
};

次に、結果xとy位置を createLinearGradient メソッドにプラグインします。これにより、見栄えの良い円形グラデーションが作成されます。もちろん、arcメソッドを使用して円形にする必要があります。