Canvasでいくつかの線を描画する方法はすでに学習しているので、この記事では、それらの線を接続してより鮮明な描画を作成する方法を紹介します。

1.Canvasで複数の線を接続します

Canvasで知っているように、 beginPath()関数を使用して、新しい形状の描画の開始を宣言します。したがって、複数の線を接続するには、最初に1回だけ真と宣言し、次に各線の構文に基づいて描画ポイントを決定します。

例：このような図を描く

まず、この図を次のように分析します。

したがって、 2次線とベンジエ線の2本の線を使用します。

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(100, 20); // line 1 context.lineTo(200, 160); // quadratic curve context.quadraticCurveTo(230, 200, 250, 120); // bezier curve context.bezierCurveTo(290, -40, 300, 200, 400, 150); // line 2 context.lineTo(500, 90); context.lineWidth = 5; context.strokeStyle = 'blue'; context.stroke();

2.Canvasのライン結合プロパティ

Canvasには、2本の線（交差点）を結合する方法を選択するのに役立つlineJoinプロパティがあります。次のように接続する3つの方法があります。

• マイター：鋭角にする
• 丸い：丸い角
• 斜角：鋭い角に丸められていますが、上部が失われています

var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // set line width for all lines context.lineWidth = 25; context.strokeStyle = 'blue'; // miter line join (left) context.beginPath(); context.moveTo(99, 150); context.lineTo(149, 50); context.lineTo(199, 150); context.lineJoin = 'miter'; context.stroke(); // round line join (middle) context.beginPath(); context.moveTo(239, 150); context.lineTo(289, 50); context.lineTo(339, 150); context.lineJoin = 'round'; context.stroke(); // bevel line join (right) context.beginPath(); context.moveTo(379, 150); context.lineTo(429, 50); context.lineTo(479, 150); context.lineJoin = 'bevel'; context.stroke();

3. CanvasのArcTo（）関数

arcTo（）関数は、指定された開始点を使用してCanvasに円弧を作成するために使用されます。つまり、特定の線を接続するために使用されます（もちろん、その線にはすでに終点があり、その点は点でもあります）。 arcTo()の）。

構文： context.arcTo(x1, y1, x2, y2, r);

その中で：

• x1 ：x制御点の位置
• y1 ：コントロールポイントのy位置
• x2 ：終点のx位置
• y2 ：終点のy位置
• r ：円弧の半径（ radius ）。

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); // Vẽ 1 đường thẳng ctx.moveTo(20, 20); ctx.lineTo(100, 20); // Nôi tiếp là một đường cung ctx.arcTo(150, 20, 150, 70, 50); // Tiếp theo là một đường thẳng ctx.lineTo(150, 120); ctx.stroke(); <br><br><br><br><br><br><br><br><br><br><br><br><br>

4.結論

このレッスンでは、線を結合してさまざまな線を形成するいくつかの方法を学びました。これらの方法を組み合わせて、非常に印象的な図面を作成します。ただし、座標計算は非常に長く複雑であるため、Canvasでの作業は非常に困難です。

次のレッスンでは、シェイプと呼ばれるいくつかの特別なシェイプを描画する方法を学習します。たとえば、円、長方形、半円。