html5 Canvas は直線の描画と線種の設定を実装します

この記事では、HTML5 キャンバスで直線を描画する方法と線のスタイルを設定する方法を主に紹介します。必要な友達に参考にしてください。線の描画は最も基本です。 、線の接続により任意の形状を形成できます。 Canvasでも同様です。 次に、最も簡単な線の描き方を詳しく紹介します。 Canvas が何なのかまだわからない場合は、前の記事を読んでください。描画を学ぶとき、線は最も基本であり、線の接続によってあらゆるグラフィックを形成できます。 Canvas でも同様です。

始める前に、キャンバスとブラシを取り出しましょう:

var cvs = document.getElementById('cvs'); //画布 
var ctx = cvs.getContext('2d'); // 画笔

描画するとき、開始点は固定されておらず、いつでも変更することができます。 Canvas は手書きで描画点を決定するわけではありませんが、moveTo というメソッドがあります。 moveTo の関数は、ペン先をキャンバスから持ち上げて、指定された点 (つまり、座標) に移動することに相当します。

ctx.moveTo(x,y)

このプロセス中にグラフィックは描画されません。これは、キャンバス上でペンをぶら下げているのと同じです。
でも、ぶらぶらしていても仕方ないので、絵を描き始めなければなりません。最初に最も単純な直線を描画します。直線を描画するメソッドは lineTo です。そのパラメーターは点である moveTo と同じです。

ctx.lineTo(x,y) 当然、線を引くと筆記点も移動しますので、lineTo以降は筆記点が目標点となります。

ctx.moveTo(100,100); 
ctx.lineTo(200,100);

この時点で Web ページを更新すると、キャンバス上に予想される行がなく、何も表示されていないことがわかります。なぜなら、lineTo は実際には描画された「パス」であり、それ自体は目に見えないからです。彼を表示したい場合は、彼を「描く」必要があります。
PS を使用したことのある生徒は、グラフィックの 2 つのモード、1 つは塗りつぶし、もう 1 つはストロークであることを確実に知っているでしょう。線を描画したことは、PS でパスを描画したことと同じです。この時点で、パスのエッジを描画することができ、グラフィックスが表示されます。
キャンバスのストロークメソッドはストローク()です。次のコードを完成させましょう。この時点で更新すると、行が表示されます。もちろん、数百のパスを連続して描画し、その後ストローク アクションを実行して数百の線を一度に描画することもできます。次に、4 本の線で長方形を描画しましょう:

ctx.moveTo(100,100); 
ctx.lineTo(200,100);

ここでは、最初にパス全体を描画し、それから一度にストロークします。
——–作者の不満: Canvas 描画の欠点の 1 つは、基本的に推測に基づいており、非常に直感的ではないことです。

重要な注意事項: キャンバスの描画プロセス (つまり、塗りつぶしやストローク) は非常にリソースを消費します。システム リソースを節約して効率を向上させたい場合は、すべてのパスを描画してからグラフィックを一度に塗りつぶすかストロークするのが最善です。

上の図から、デフォルトの線の太さは 1px、線の色は黒であることがわかります。もちろん設定できるのですが、不思議なのは、線幅の設定は lineWidth ですが、線のスタイルの設定は、なぜ lineStyle ではないのでしょうか。私にも分かりません。 :

ctx.moveTo(100,100); 
ctx.lineTo(200,100); 
ctx.lineTo(200,200); 
ctx.lineTo(100,200); 
ctx.lineTo(100,100); 
ctx.stroke();

上記のコードは、線の幅を 10px に、線の色を半透明の赤に設定します。

図 1 に示すように、何かが間違っているようですので、更新してください。左上隅に小さな部分が欠けているのはなぜですか?これは幻想ではありません。その理由はキャンバスの線の描き方から始まります。
質問: 描画した長方形のパスの幅と高さが 100、辺の線の幅が 10 ピクセルの場合、辺を描画した長方形の全体の幅と高さはいくらですか? 100+10*2=120ですか？

エッジがパスの外側に完全に描画されている場合は、120 です。しかし、キャンバスはそうではありません。 Canvas のすべての線には「中央線」があり、線の絶対的な中央に位置し、線のストロークは中心線から両側に伸びます。たとえば、線の幅が 1 の場合、中心線は 0.5 にあり、幅が 5 の場合、中心線は 2.5 になります。キャンバス グラフィックスをストロークすると、パスは線の中心線に合わせてストロークされます。図 2 に示すように:

したがって、トレースすると、線の半分が外側にあり、半分が内側にあります。つまり、上の長方形の全体の幅は 100+(10/2) になります。 *2 は 110 に相当します。
も正しいです。 このため、左上の角が欠けているのは当然です。ここでは絵を描く人がいないからです。

しかし、残りの角はなぜ欠けていないのでしょうか?写真の四隅に隙間があるように見えませんか？

それは、線を描くときにブラシを「持ち上げ」なかったためです。つまり、ブラシが連続していたためです。つまり、moveTo がありませんでした。信じられないなら、今すぐ moveTo をしてみましょう:

ctx.lineWidth = 10; 
ctx.strokeStyle = 'rgba(255,0,0,0.5)';

2 番目の線を描く前に moveTo を実行しました。moveTo の座標は変化せず、同じ点のままでしたが、更新するとグラフは次のようになりました [写真] 3]:

明白了？因为我们把笔提起来了。
现在我们删掉moveTo，不要纠结他了，我们来思考一下如何把左上角那个缺角给补上？
首先问个问题，我们的路径闭合了吗？这不是废话么，我们不是已经把路径绕回原点了么？当然算是闭合了！
错！这样只是让路径最后一个点和起点重合了而已，路径本身却没有闭合！
Canvas怎么闭合路径？用closePath(). 

ctx.moveTo(100,100); 
ctx.lineTo(200,100); 
ctx.lineTo(200,200); 
ctx.lineTo(100,200); 
ctx.lineTo(100,100); 
ctx.closePath();//闭合路径 
ctx.lineWidth = 10; 
ctx.strokeStyle = 'rgba(255,0,0,0.5)'; 
ctx.stroke();

此时刷新，就是一个完美的正方形了。图4：

无论我们把线条改到多粗————越粗越有人喜欢是吧？————这个四方形的四个角都是规矩的直角，不会出现圆滑的情况。圆滑的角是什么情况？请看PS中的四方形描边，图5：

看到了吧，越粗的边线，他的角的圆弧越大。
如果我想Canvas里面的边线也和PS这种一样，有没有办法呢？当然有，就是lineJoin属性。
lineJoin，意思即线的交汇处，有3个属性：miter(默认，尖角)，bevel（斜角）,round（圆角），如图6：
 
毫无疑问我们一下就能明白我们的矩形用的是尖角，所以试着把他改成圆角看看：
图形变成了这样，图7：
 
有点像PS的了吧？
另外，通过前面图我们了解到，Canvas的线条两端是平的，可不可以改呢？毕竟平的不好看。
也是可以的，即lineCap属性，这个就是定义线条的端点。lineCap有3个值：butt（平，默认）,round（圆）,square（方），如图8
 
看图就能发现，其实平头跟方头是一样的，区别只是平头没有伸出去那么一截。圆头和方头都会伸出去一截，这一节是多长呢？就是线条宽度的一半。
你有没有想到什么？哈哈，前面的闭合路径的问题，如果我们把lineCap设为方头，效果也是一样的！
但为了保险起见，我们还是要把路径闭合了，切记！
我还要提醒一下：闭合的路径没有端点！所以闭合的路径上看不到端点的样式。
另外：lineCap与lineJoin有点相似，注意不要搞混。
如果你眼尖并且运气不好，你可能会发现有时候1像素的线条不是1像素宽，好像要宽一些，模糊一些。如图9：

恭喜你!你遇到了一个不是bug的bug。这个很特别，我把他放到下一篇文章讲吧

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

相关推荐：

HTML5 Canvas渐进填充与透明实现图像的Mask效果

以上がhtml5 Canvas は直線の描画と線種の設定を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。