Canvasは、直線の描画に加えて、円弧、2次曲線、ベンジエ曲線などの曲線を描画することもできます。直線の描き方は、始点と終点を決めるだけですが、曲線の場合、描く前に計算するのにかなりの問題があります。

1.キャンバスに円弧を描く

円弧を描画するには、 arc(x, y, radius, startAngle, endAngle, counterClockwise)を使用します。ここで、

• xとyは円弧の中心です
• radiusは半径です
• startAngleは開始角度です
• endAngleは終了角度です
• counterClockwiseは描画方向です（時計回りまたは反時計回り）

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // Xác đinh tâm là trọng tâm của Canvas var x = canvas.width / 2; var y = canvas.height / 2; // bán kính 75px var radius = 75; // Góc bắt đầu là 1.1PI var startAngle = 1.1 * Math.PI; // Góc kết thúc là 1.9PI var endAngle = 1.9 * Math.PI; // Cùng chiều kim đồng hồ var counterClockwise = false; // Vẽ đường cung context.beginPath(); context.arc(x, y, radius, startAngle, endAngle, counterClockwise); context.lineWidth = 15; // line color context.strokeStyle = 'black'; context.stroke();

2.Canvasで2次曲線を描きます

Canvasで2次曲線を描画するには、 quadraticCurveTo()メソッドを使用します。2次曲線は、次の3つの主要なポイントによって決定されます。

• 開始点（コンテキストポイント）。
• コントロールポイント（コントロールポイント）。
• 終点（終点）。

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(20, 20); // Điểm bắt đầu vẽ context.quadraticCurveTo(20, 100, 200, 20); //vẽ qua các điểm context.lineWidth = 1; // line color context.strokeStyle = 'black'; context.stroke();

• 開始点は、 context.moveTo( 20, 20 )関数の（20、20）です。
• コントロールポイントは、関数context.quadraticCurveTo( 20, 100 , 200, 20)です。
• エンドポイントは、 context.quadraticCurveTo(20, 100, 200, 20 )関数の（200、20）です。

曲線の頂点位置は、2本の線（コンテキストポイント、コントロールポイント）と（エンドポイント、コントロールポイント）の間の中点を結ぶ線によって決定されます。

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(188, 150); context.quadraticCurveTo(288, 0, 388, 150); context.lineWidth = 10; // line color context.strokeStyle = 'black'; context.stroke();

3.キャンバスにベンジエ曲線を描く

ベンジエ曲線は、次の4つのポイントで定義されます。

• 開始点（コンテキストポイント）
• コントロールポイント1（コントロールポイント1 ）
• コントロールポイント2（コントロールポイント2 ）
• 終点

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20, 20); ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); ctx.stroke();

コード内の説明は次のとおりです。

• 開始点は、 context.moveTo( 20, 20 )関数の（20、20）です。
• コントロールポイント1は、関数context.quadraticCurveTo( 20, 100 , 200, 100, 200, 20)です。
• コントロールポイント2は、関数context.quadraticCurveTo（ 20、100、200、100、200、20 ）ではcontext.quadraticCurveTo(20, 100, 200, 100 , 200, 20)です。
• エンドポイントは、 context.quadraticCurveTo(20, 100, 200, 100, 200, 20 )関数の（200、20）です。

問題は、頂点と曲率をどのように決定するかです。以下の例を参照してください。

 var canvas = document.getElementById('myCanvas');<br /> var context = canvas.getContext('2d');<br /> <br /> context.beginPath();<br /> context.moveTo(188, 130);<br /> context.bezierCurveTo(140, 10, 388, 10, 388, 170);<br /> context.lineWidth = 10;<br /> <br /> // line color<br /> context.strokeStyle = 'black';<br /> context.stroke();

4.結論

すでにCanvasでの作業が難しいと感じ始めています。実際、良い画像を描くには、座標を決定するために数学の知識を使用する必要があることは言うまでもなく、各標準ピクセルを計算する必要があります。

次のレッスンでは、このレッスンと前のレッスンで学習した関数を使用して線を引く方法を学習します。