HTML5キャンバス描画チュートリアル（4） - 閉鎖されていないパスと勾配色の充填方法

2つの一般的な描画方法、つまり塗りつぶしとストロークがあります。前の記事では、脳卒中の方法についてすでに説明しています。この記事では、キャンバスのグラフィックを入力する方法について説明します。

fill（）は非常に簡単ですか？また、ストロークスタイルがストロークスタイルを表すように、フィルスタイルはフィルスタイルを表します。

ctx.fillstyle = 'color';デフォルトの塗りつぶしスタイルは不透明な黒です

できる。 Canvasは、現在のパスの終点から出発点に直接接続し、それを埋めます。写真に示されているように：

しかし、最後の段落にはストロークがないことがわかります。

前の記事では、4行で正方形を描いたが、キャンバスはそれほど悪くなく、長方形を直接描画する機能すら描かれていないことを覚えています。 FillRect（）を使用して、長方形に直接入力できます。

ctx.fillrect（x、y、幅、高さ）;

ここで、xとyは、長方形の左上隅の出発点の座標を参照してください。

fillrectといえば、ストラークに言及する必要があります。あなたはそれを正しく推測しました、それは長方形を直接ストロークすることを意味します。

FillTextとStrokeTextもあります。関数に関しては、あなたはそれを推測したかもしれません。ここでは話しませんので、誰もが最初にプレビューします。

キャンバスでは、勾配の色は2つのタイプ、つまり線形勾配と放射状勾配に分割され、それらを作成する方法も独立しています。まず、線形勾配を作成する方法を見てみましょう。

Linear Gradient = createLinearGradient -look、まだ非常に直接的な単語を作成します。彼の構文は次のとおりです。

CreateLinearGradient（x1、y1、x2、y2）には4つのパラメーターがあります！非常に複雑に見えますが、実際にはこれは非常に簡単です。飛行機の世界のポイントはX座標とY座標によって決定されるとすでに言っているからです。したがって、x1、y1は線形勾配の開始ポイント座標を表し、x2、y2はエンドポイント座標を表します。

これを行うことの利点は明らかであり、斜め線形勾配を作成したい場合は便利です。しかし、最初に水平線形勾配を作成してみましょう。

var linear = ctx.createlinear gradient（100,100,200,100）;勾配が作成されているようですので、それを埋めることができますか？ - この勾配は空で、色がありません。

グラデーションバーに色を追加する方法は、ColorStop（位置、色）です。ただし、このAddColorStopはブラシに追加されるのではなく、前方の勾配を保存する変数に追加されることに注意してください。私はここで直線的です。

var linear = ctx.createlinear gradient（100,100,200,100）;

linear.addcolorstop（0、 '＃fff'）;

linear.addcolorstop（0.5、 '＃f0f'）;

Linear.AddColorStop（1、 '＃333'）;

ここで3つのAddColorStopsを使用しました。つまり、グラデーションバーに3色を追加します。

この時点で、勾配の色を埋めることができますが、最初に定義された勾配をフィルスタイルに割り当てる必要があります。

var linear = ctx.createlinear gradient（100,100,200,100）;

linear.addcolorstop（0、 '＃fff'）;

linear.addcolorstop（0.5、 '＃f0f'）;

Linear.AddColorStop（1、 '＃333'）;

ctx.fillstyle = lienear; //グラデーションを塗りつぶしてスタイルに割り当てます

ctx.fillrect（100,100,100,100）;

ctx.stroke（）;

FillRectおよびStrokerectは、独立したパスを描画することに注意してください。たとえば、上記のコードでは、ストロークがfillrectの後に呼び出され、描画された長方形は脳卒中になりません。同じことがStrokerectにも当てはまります。

テスト後、非常に痛みを伴う問題を発見しました。つまり、線形勾配の座標はキャンバス範囲全体に関連しています。たとえば、ここでは、私の線形勾配は100,100から始まります。長方形を0,0で描画してこの勾配で埋めると、塗りつぶしはないことがわかります。なぜなら、勾配の範囲は長方形の範囲を超えているからです。

これは本当に詐欺の設定です。

ミーティング。出発点の前の色は出発点の色であり、エンドポイントの後の色は常にエンドポイントの色です。

エンドポイントの色を終了する方法、エンドカラーの後に透明なエンドカラーを埋めることができます。のように：

Linear.AddColorStop（0.99、 '＃333'）;

Linear.AddColorStop（1、 'RGBA（51,51,51,0）'）;

前の計画によれば、私は別の傾斜した線形勾配を構築しようとします。 CreateLinear等勾配のパラメーターを変更するだけです。

var linear = ctx.createLineargradient（100,100,200,200）;

効果は写真に示されています：

次に、放射状勾配（円形勾配）を試してみましょう。 CreateLinear勾配と同様に、放射状勾配を作成する方法は次のとおりです。CreateradialGradientですが、パラメーターは非常に異なる場合があります。

x1、y1、x2、y2がまだ出発点とエンドポイントを表しているクリーターディアルグレディエント（x1、y1、y1、x2、y2、r2）は、開始点とエンドポイントは円の両方であり、yは円の中心の座標です。したがって、R1とR2は、それぞれ開始点円の半径とエンドポイント円の半径です。写真に示されているように：

私の印象では、放射状勾配は円であり、円の中心が出発点であり、円の半径がエンドポイントであるようです。しかし、キャンバスの放射状勾配は実際には異なります。出発点は円であり、エンドポイントは円であり、私の理解とは異なります。

最も簡単なことから始めましょう。まず、非常に通常の放射状勾配を作成します。つまり、勾配円の中心が勾配の出発点です。通常の放射状勾配のため、中心は円の中心です。スキューを避けるように努めるべきです。それでは、端部の中心を開始円の中心と重複させましょうか？

var radial = ctx.createradialgradient（55,55,10,55,55,55）; //対応するセンター座標

radial.addcolorstop（0、 '＃fff'）;

radial.addcolorstop（0.5、 '＃ff0'）;

radial.addcolorstop（0.9、 '＃555'）;

radial.addcolorstop（1、 '＃f00'）;

ここで設定したラジアル勾配の開始点円と終末の円中心座標私は同じですが、開始点円の半径は10、終了点円の半径は55です。

（エンドサークルの範囲外にまだ色があり、この色はエンドカラーです。ただし、Radial.AddColorStop（1.5、 '＃0F0'）を使用しようとすると、グラデーション範囲外の色を定義するには、エラーを受け取ります）。

では、開始点円の半径の使用は何ですか？ - 通常の放射状勾配の中心（心臓の変化と呼びましょう...）は、円ではなくポイントに過ぎません。実際、私たちは正しいです。この出発点の円はドットのようなものですが、比較的大きいかもしれません。

開始円の半径を非常に大きくし、端部の円の半径に近いものにしましょう。

var radial = ctx.createradialgradient（55,55,50,55,55,55）; //非常に近い

他のカラーストップは変わらず、グラフィックスはこのようになります。

言い換えれば、キャンバスの放射状勾配の開始色は、開始円の範囲の外側から引き出され、開始円の色全体が開始色です。

開始点円の半径を0に設定しましょう。ラジアルグラデーション中心の変化は本当にポイントです。

ほとんどの場合、私たちは非常に正式な放射状勾配を必要としませんが、代わりに、下の図と同様に、その心臓の変化が相殺されることを願っています。

この時点で、キャンバスの放射状勾配の2つの円の利点が発生します。開始点の円とエンドポイント円の中心が重複しない限り、心臓の変化もシフトします。

var radial = ctx.createradialgradient（75,75,0,55,55,55）;しかし、この時点での勾配範囲は、依然としてエンドサークルの範囲です。

多くの人々は、破壊の考え方で生まれています。たとえば、ここでは、終了円の半径は常に開始円よりも大きくなりますが、それらが反転した場合はどうなりますか？

var radial = ctx.createradialgradient（75,75,55,55,55,0）;

テスト後、エラーはありませんが、内側から外側への元の勾配は外側から内側への勾配に変わりました。これはそれを使用する良い方法です。

別の問題があります。開始円の中心と開始円の範囲が端部の範囲を超えた場合、

現時点ではどうなりますか？

ああ！ ？状況は何ですか？ ！

この状況は、開始円と端部の円が部分的にのみオーバーラップする場合に発生します。したがって、通常の放射状勾配が必要な場合は、1つの円が他の円を完全に囲むことを確認してください。

さらに、勾配をfillstyleに割り当てることができるため、strokestyleに割り当てることもできます。あなたは効果を知っています。