2

誰かが私を、できれば実例となる写真で説明できますか？これらの方法はどのように機能しますか？さまざまな例やチュートリアルを見てきましたが、その考えを理解できないようです。は2つの円を作成することを理解していcreateRadialGradient()ますが、これら2つの円は互いにどのように関連し、方法はどのように関係していaddColorStop()ますか？

4

1 に答える 1

11

はい、私はこれが壊滅的であることを知っています...しかし、それは決してかじられなかった有効な質問のようです、それで私は誰かがそれを必要とする場合に備えてこれをここに残します。

================================================== ==============================

まあ、グラデーションはある色から別の色へのスムーズなシフトです。

どのグラデーションでも、色が始まるポイント、色が終わるポイント、および必要な色を選択すると、色がそれらの間でスムーズに移行します。

カラーストップは、グラデーションの一部となる色と、グラデーションのどこにそれらの色が表示されるかを決定するためにあります。

線形グラデーションでは、色が直線で1つの色から次の色に遷移するため、軸に垂直な線に沿って色の帯が形成されます。

放射状のグラデーションでは、色は中央の円（または単に非常に小さな円である点）の周りを包み込み、その中心からグラデーションの端に移行します。

これは、グラデーションを構成するカラーバンドが、中心から端に移行するときに、ますます大きな円に形成されることを意味します。

これは、中央の白から外側の端の黒に移行する単純な放射状グラデーションの例です。

これがcreateRadialGradientの構文の原点です。

この最初の円は色が始まる場所になります。中央から始まることを任意に示します...それがx：100、y：100であるとしましょう

2番目の円は、色が終了する場所になります。中心を選択して開始したため、色は円の外側の端で終了します（ただし、これらは簡単に反転できます）。

簡単にするために、中心点（この場合）は同じままです：x：100、y：100

これらの円の本当の違いは半径になります。中心は小さいはずなので、半径を1にし、円の外側の半径を大きくすると、100にします。

これにより、必要なパラメータが得られます。

x = 100;
y = 100;
radiusStart = 1;
radiusEnd = 100;

var grad = ctx.createRadialGradient(x,y,radiusStart,x,y,radiusEnd);

ただし、このコードをそのまま表示しようとすると、何も表示されません...これは、カラーストップが必要なためです。

カラーストップは、ストップの位置と色の2つのパラメーターで宣言されます。

位置は0から1までの数値で、開始から終了までの距離のパーセンテージを表します。

色を白から始めたい場合は、次を使用します。

grad.addColorStop(0,'#FFFFFF');

これは、カラーストップがラインの0％（グラデーションが始まる場所を意味する）から始まり、そこに白としてペイントするための色を与えることを意味します。

同様に、2番目のグラデーションは黒で、グラデーションの最後に配置する必要があります。

grad.addColorStop(1,'#000000');

これらはコンテキストを直接参照していないことに注意してください...グラデーションを作成するためにコンテキストを参照しましたが、作成したグラデーションにストップを直接追加しています。

グラデーションの作成が終了したら、作成したグラデーションがスコープ内にある限り、このグラデーションをfillStyle（またはstrokeStyle）として使用できます。

完全なコード：

x = 100;
y = 100;
radiusStart = 1;
radiusEnd = 100;

var grad = ctx.createRadialGradient(x,y,radiusStart,x,y,radiusEnd);
grad.addColorStop(0,'#FFFFFF');
grad.addColorStop(1,'#000000');

ctx.beginPath();
ctx.arc(x,y,radiusEnd,0,Math.PI*2,false);
ctx.fillStyle = grad;
ctx.fill();

これで遊んでいる間、少し実験することを忘れないでください。

2つ以上のカラーストップを追加してみてください...これは、黒から白（退屈）に移行する代わりに、青から緑、黄色、オレンジ、赤、紫に移行できることを意味します。

位置を適切に設定することを忘れないでください...たとえば（上記のように）6色があり、それらを等間隔にしたい場合は、.2間隔で位置を設定します。

grad.addColorStop(0,'#0000FF');
grad.addColorStop(.2,'#00FF00');
grad.addColorStop(.4,'#FFFF00');
grad.addColorStop(.6,'#FF8800');
grad.addColorStop(.8,'#FF0000');
grad.addColorStop(1,'#AA00AA');

同じ位置に配置しようとするカラーストップは、互いに上書きされます。

もう1つの優れた効果は、グラデーションを作成するときに円に2つの異なる中心を設定することです。これにより、グラデーションに異なる効果が与えられ、武器に追加する価値があります。

ここに、W3C仕様からの2つの画像があります（それ自体はここにあります）。これらは両方とも、1番目と2番目の円の中心点が異なる放射状のグラデーションです。

より良い例はここにありますが、コード自体はhtml背景のsvgで記述されていますが、例は、中心が異なる放射状グラデーションを使用するためのいくつかの優れた方法を示しています。彼は放射状勾配の理論をカバーし、いくつかの非常に良い例を示しています。

最後に、ヒント...手でグラデーションを書くことはかなり可能ですが、それはお尻の痛みのようなものです。通常、Photoshop、Illustrator、GIMP、またはInkscapeを入手して、それらのいずれかでグラデーションを作成する方がはるかに簡単です...その後、好きになるまでグラデーションを直接調整できます。次に、カラーストップ情報をキャンバスコードにコピーするだけです。

そのいくつかが誰かを助けることを願っています。

于 2013-09-15T07:38:37.460 に答える