HTML5 Canvas は、閉じられていないパスとグラデーション カラーを描画する塗りつぶしメソッドを実装します。

この記事では、HTML5 キャンバスで閉じていないパスを描画し、グラデーション カラーを塗りつぶす方法を主に紹介します。必要な友達に参考にしてください。 . つまり、塗りつぶしとストロークについてはすでに説明しました。この記事では、Canvas でグラフィックを塗りつぶす方法について説明します。 描画には通常、塗りつぶしとストロークの 2 つの方法があります。前回の記事でストロークの方法について説明しました。今回は Canvas でグラフィックを塗りつぶす方法について説明します。

塗りつぶしは fill() で、とても簡単ですよね?そして、ストロークスタイルがストロークスタイルを表すのと同じように、fillStyle は塗りつぶしスタイルを表します。

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

質問: 閉じられていないパスを塗りつぶすことはできますか?
はい。キャンバスは、現在のパスの終点から始点に直接接続し、塗りつぶします。図に示すように:

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

前回の記事では 4 本の線で正方形を描画しましたが、Canvas はそれほど悪くはなく、直接長方形を描画する機能さえありません。 fillRect() を使用して四角形を直接塗りつぶすことができます:

ctx.fillRect(x,y,width,height);

ここでの x と y は、四角形の左上隅の開始点の座標を指します。覚えておいてください。

fillRect と言えば、strokingRect について触れなければなりません。ご想像のとおり、これは四角形を直接ストロークすることを意味します。

fillText とストロークテキストもあります。それらの機能については、ここでは説明しません。


キャンバスの塗りつぶしグラデーションカラー
Canvasでは、グラデーションカラーも線形グラデーションと放射状グラデーションの2種類に分けられ、作成方法も独立しています。まず、線形グラデーションを作成する方法を見てみましょう。 線形グラデーションの作成 =createLinearGradient – ほら、これでも非常に簡単な言葉です。その構文は次のとおりです:
createLinearGradient(x1,y1,x2,y2) には 4 つのパラメーターがあります。とても複雑そうに見えますが、実際にはこれは非常に単純です。なぜなら、前に述べたように、平面世界の点は x 座標と y 座標によって決定されるからです。したがって、x1、y1は直線勾配の始点座標を表し、x2、y2は終点座標を表します。
これの利点は明白で、斜めの線形グラデーションを作成したい場合に非常に便利です。ただし、最初に水平方向の線形グラデーションを作成してみましょう。
var Linear = ctx.createLinearGradient(100,100,200,100); グラデーションが作成されているようなので塗りつぶしてもいいでしょうか？ ————このグラデーションは空で色がありません。
グラデーションバーに色を追加するメソッドは addColorStop(position, color) ですが、この addColorStop はブラシに追加されるのではなく、グラデーションを保持する前の変数に追加されることに注意してください。ここでは 3 つの addColorStop が使用されています。これは、3 つの色がグラデーション バーに追加されることを意味します。

注
: addColorStop の位置パラメータは常に 0 ～ 1 の数値であり、パーセンテージを示す小数点以下 2 桁までの可能性があります。 「3px」などのパラメータを受け取ることはできません。

この時点で、グラデーション カラーを塗りつぶすことができますが、最初に定義されたグラデーションを fillStyle に割り当てる必要があります。上記のコードに示すように、fillRect とストロークRect は独立したパスを描画し、fillRect の後にストロークを呼び出します。描画したばかりの四角形をストロークしません。ストロークRectにも同じことが当てはまります。

テスト後、非常に厄介な問題を発見しました。それは、線形グラデーションの座標がキャンバス範囲全体に対して相対的であるということです。たとえば、ここでは、線形グラデーションの開始点が 100,100 である場合、0,0 で四角形を描画し、それをこのグラデーションで塗りつぶすと、グラデーションの範囲が単純に四角形を超えるため、塗りつぶしがないことがわかります。範囲。
これは本当にズルい設定です。
質問: 色はグラデーションの開始点の前と終了点の後に塗りつぶされますか?

はい。開始点の前の色が開始色となり、終了点の後の色が常に終了色になります。

終了カラーの終了方法は、終了カラーの後に透明な終了カラーを塗りつぶすことができます。例:

var linear = ctx.createLinearGradient(100,100,200,100); 
linear.addColorStop(0,'#fff'); 
linear.addColorStop(0.5,'#f0f'); 
linear.addColorStop(1,'#333');

前の計画に従って、傾いた線形グラデーションを構築してみます。 createLinearGradient のパラメーターを変更するだけです。

var linear = ctx.createLinearGradient(100,100,200,100); 
linear.addColorStop(0,'#fff'); 
linear.addColorStop(0.5,'#f0f'); 
linear.addColorStop(1,'#333'); 
ctx.fillStyle = linear; //把渐变赋给填充样式 
ctx.fillRect(100,100,100,100); 
ctx.stroke();

効果は図のようになります。



次に、放射状グラデーション (円形グラデーション) を試してみましょう。 createLinearGradient と同様に、放射状グラデーションを作成する方法は createRadialGradient ですが、パラメータは大きく異なる場合があります:

createRadialGradient(x1,y1,r1,x2,y2,r2) ここで、x1,y1,x2,y2 は開始位置を表します。点と終点ですが、ここでの始点と終点は両方とも円であり、x、yは円の中心の座標です。したがって、r1 と r2 はそれぞれ開始円の半径と終了円の半径になります。写真に示すように:

在我的印象中，貌似径向渐变就是一个圆，圆心就是起点，圆的半径就是终点。但canvas里面的径向渐变竟然搞的不一样了，起点一个圆，终点一个圆，和我的理解有差距。
我们从最简单的做起。首先，做一个很正规的径向渐变，即渐变圆形的圆心就是渐变的起点。由于正规的径向渐变，中心即圆心，所以我们应该尽量避免发生偏斜。那么，我们把终点圆的圆心与起点圆的圆心重合吧？

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.最后画出的径向渐变范围是一个宽高110的圆形，说明渐变范围以终点圆的范围为准。
（可以看到终点圆范围之外还是有颜色，这个颜色就是终点色，但是，如果你企图使用radial.addColorStop(1.5,’#0f0′);这样来定义渐变范围之外的颜色，你还是会收到一个错误）.
那么，起点圆的半径有什么用呢？——本来正常的径向渐变的中心（姑且称之为“变心”…吧）只是一个点，不应该是一个圆的。其实我们没错，这个起点圆就相当于一个圆点而已,只是可能比较大。
让我们把起点圆的半径变得很大，接近于终点圆的半径：

var radial = ctx.createRadialGradient(55,55,50,55,55,55); //很接近

其他的colorStop都不变，然后图形就变成了这个样子。

也就是说，canvas中径向渐变的起点色，是从起点圆的范围之外绘制的，而起点圆的整个颜色都是起点色。
我们把起点圆的半径设为0，那径向渐变的“变心”，就真的是一个点了。
大部分时候我们都不需要很正规的径向渐变，反而希望他的变心是偏移的，类似下图：

这个时候，canvas径向渐变两个圆的优势就出来了，只要我们起点圆与终点圆的圆心不重合，那变心也就会偏移：
var radial = ctx.createRadialGradient(75,75,0,55,55,55);但此时的渐变范围依然是终点圆的范围哈。
很多人天生就有一种搞破坏的心理，比如这里，终点圆的半径总比起点圆大，但如果把他们反过来会怎么样呢？

var radial = ctx.createRadialGradient(75,75,55,55,55,0);

经测试，这样不会报错，只是原来的从内到外的渐变反过来变成了从外到内的渐变了。这是个好用法。

还有个问题，如果我们把起点圆的圆心偏移了，并且起点圆的范围超出了终点圆的范围，

这时会发生什么？

啊！？这是什么情况？！
当起点圆和终点圆只有部分重叠的时候，就会出现这种情况。所以，如果你需要正常的径向渐变，请保证其中一个圆完全包住了另一个圆。
另外，既然渐变可以赋给fillStyle，那么也可以赋给strokeStyle。效果你懂的。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

angularJS结合canvas画图的实现

关于使用HTML5进行SVG矢量图形绘制的代码

以上がHTML5 Canvas は、閉じられていないパスとグラデーション カラーを描画する塗りつぶしメソッドを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。