Canvasがまだわからない場合は、前の記事をご覧ください。
描画を学ぶとき、線が最も基本的であり、線の接続は任意の形状を形成できます。キャンバスでも同じことが言えます。
開始する前に、キャンバスとブラシを取り出します。
var cvs = document.getElementById（ 'cvs'）; //キャンバス
var ctx = cvs.getContext（ '2d'）; //ブラシ
描くと、ペンポイントは固定されておらず、いつでも変更されます。 Canvasは手を介した書き込みポイントを決定しませんが、Movetoである方法もあります。 Movetoは、ペンの先端をキャンバスから持ち上げ、指定されたポイント（つまり、座標）に移動することに相当します。
ctx.moveto（x、y）
このプロセス中にグラフィックは描かれていません。これは、ペンでキャンバスを揺さぶるのと同じです。
しかし、動き回るのは役に立たないので、絵を描き始めなければなりません。最も単純な：直線を描画します
直線を描く方法はリネートです。そのパラメーターはMovetoと同じであり、どちらも同じポイントです。
ctx.lineto（x、y）もちろん、ラインを描くと、ペンポイントも動きます。したがって、リネートの後、ペンポイントがターゲットポイントになります。
ctx.moveto（100,100）;
ctx.lineto（200,100）;
この時点で、Webページを更新すると、キャンバスに予想される行がなく、何もないことがわかります。ステップが1つ少ないため、Linetoは実際には描かれたパスであり、それ自体では見えません。彼にそれを見せてほしいなら、私たちは彼を描かなければなりません。
PSを使用した学生は、グラフィックスの2つのモードを間違いなく知っています。1つは充填されており、もう1つはストロークです。今、私たちは線を引き出しました。これは、PSにパスを描くのと同じです。この時点で、パスの端を描画でき、図が表示されます。
キャンバスストロークの方法はストロークです（）。次に、コードを完成させましょう。
ctx.moveto（100,100）;
ctx.lineto（200,100）;
ctx.stroke（）;この時点で更新すると、行が表示されます。もちろん、何百ものパスを連続して描画してから、ストロークアクションを実行して数百のラインを一度に描画することもできます。次に、4行で長方形を描きましょう。
ctx.moveto（100,100）;
ctx.lineto（200,100）;
ctx.lineto（200,200）;
ctx.lineto（100,200）;
ctx.lineto（100,100）;
ctx.stroke（）;
ここでは、最初にすべてのパスを描いてから、次々にストロークします。
- 著者の苦情：Canvasの描画に関する悪い点の1つは、基本的に推測に依存しており、直感的ではないことです。
深刻なヒント：キャンバスの描画プロセス（つまり、充填とストローク）は非常にリソースを消費します。システムリソースを保存し、効率を向上させたい場合は、すべてのパスを描き、一度にフィギュアを埋めるか、ストロークすることをお勧めします。
上記の図から、デフォルトの線の厚さは1pxで、線色は黒いことがわかります。もちろん、それらを設定することはできますが、奇妙なことは、線の幅が線幅であり、ラインスタイルはStrokestyleと呼ばれることです。なぜLinestyleではないのですか？私も知りません。 ：
ctx.linewidth = 10;
ctx.strokestyle = 'rgba（255,0,0,0.5）';
上記のコードは、線幅を10pxに設定し、線の色は半透明の赤になります。
図1に示すように、それを更新してください、それは何かが間違っているようです！なぜ左上隅に小さなピースが欠けているように見えるのですか？これは幻想ではありません。その理由は、キャンバスラインの描画方法から始まります。
質問：長方形の経路が幅と高さが100で、エッジラインの幅が10pxである場合、この長方形の全体の幅と高さはエッジを描いたものですか？ 100+10*2 = 120ですか？
エッジがパスの外側に完全に描かれている場合、それは120です。しかし、キャンバスはそうではありません。キャンバスのラインには、ラインの絶対中央に位置する正中線があり、ラインのストロークは正中線のある両側に伸びています。たとえば、ライン幅が1の場合、中心線は0.5です。幅が5の場合、中心線は2.5です。キャンバスの数字がstrokeであると、パスはラインの正中線にフィットし、その後ストロークします。図2に示すように：
したがって、strokeで、線の半分が外側にあり、半分は内側にあります。つまり、上部長方形の全体の幅は100+（10/2）*2で、110に等しいです。
このため、左上隅に角が欠けているのは自然なことです。誰もここにそれを描いていないからです。
しかし、なぜ残りの角に隙間がないのですか？あなたの写真を見てください、四隅にギャップがありませんか？
それは、線の描画中にブラシを持ち上げることができず、ブラシが連続していたからです。つまり、私は以前に動きませんでした。あなたがそれを信じないなら、今Movetoをしましょう：
ctx.moveto（100,100）;
ctx.lineto（200,100）;
ctx.moveto（200,100）; //ここに注意してください
ctx.lineto（200,200）;
ctx.lineto（100,200）;
ctx.lineto（100,100）;
ctx.linewidth = 10;
ctx.strokestyle = 'rgba（255,0,0,0.5）';
ctx.stroke（）;
2行目を描く前に移動しましたが、Movetoの座標は変わっていません。それはまだ同じポイントですが、リフレッシュした後、図は次のようになります[図3]
理解した？ペンを持ち上げたからです。
それでは、Movetoを削除しましょう。心配しないでください。左上隅の行方不明の角に埋める方法について考えてみましょう。
まず、質問させてください、私たちの道は閉じられていますか？これはナンセンスではありませんか？私たちはすでに道を元に戻していませんか？もちろん閉じています！
間違っている！これにより、パスの最後のポイントが出発点と重複しますが、パス自体は閉じられていません！
キャンバスのパスを閉じる方法は？ 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：
私はそれを見ました。縁が厚いほど、彼の角度の弧が大きくなります。
キャンバスのエッジラインがPSのエッジラインと同じだと思う場合、何らかの方法はありますか？もちろん、LineJoin属性があります。
ラインの交差点を意味するLineJoinには、図6に示すように、3つのプロパティがあります。
長方形が鋭い角を使用していることを理解できることは間違いありませんので、丸い角に変更してみてください。
グラフィックはこのようになりました、図7：
PSに少し似ていますよね？
さらに、前の写真から、Canvasラインの両端が平らであることがわかりました。変更できますか？結局のところ、それは格好良いことではありません。
また、ラインを定義するエンドポイントであるLineCapプロパティ、つまり可能です。 LineCapには、図8に示すように、バット（フラット、デフォルト）、ラウンド（円）、正方形（正方形）の3つの値があります。
平らな頭は実際には正方形の頭と同じであることがわかります。唯一の違いは、平らな頭が伸びていないことです。丸い頭と正方形の頭の両方が作品に伸びています。このセクションはどのくらいですか？それがラインの幅の半分です。
何かを考えたことがありますか？ハハ、以前のクローズドパスの問題である、linecapを正方形のヘッダーとして設定すると、効果は同じになります！
しかし、安全な側にいるためには、私たちはまだ道を閉じなければなりません、覚えておいてください！
私もあなたに思い出させたい：閉じたパスにはエンドポイントがない！したがって、エンドポイントのスタイルは閉じたパスには見えません。
さらに：LineCapはLineJoinに少し似ています。周りを台無しにしないように注意してください。鋭い目で運が悪い場合は、1ピクセルのラインが幅1ピクセルではないことがありますが、幅が広くぼやけているように見えることがあります。図9に示すように：
おめでとう！バグではないバグに遭遇しました。これはとても特別です、私は彼を次の記事に入れます