Html5 Canvas 事前学習ノート (10) - 複雑なパス

簡単な描画パスは以前紹介しました。この記事では、ポリラインとベジェ曲線の描画を紹介します。まず、その効果は次のとおりです。

context.beginPath();
context.moveTo(100,50);
//context.lineTo(100,50);
context.lineTo(150,150);
context.lineTo(50,150);
//context.closePath();
context.stroke();

以前に紹介しました。 moveTo

次に、始点の水平座標と垂直座標を接続してみました。最初は

lineTo

ですが、これから直線を引くこともできます。次の点をポイントし、この点を開始点として使用します。

lineToを調整する場合、context.closePath();の場合は、前の点を開始点として使用します。がオンになっている場合、現在の点は最も早い開始点に接続されて閉じた三角形を形成します。効果は次のとおりです: 以下のベジェ曲線を見てください。ベジェ曲線を実装します: quadraticCurveTo と

bezierCurveTo

、それぞれ 2次ベジェ曲線 曲線と 3 次ベジェ曲線の違いは、2 次ベジェ曲線にはピークが 1 つだけあるのに対し、3次ベジェ曲線には両方のピークがあることです。まず、2 次ベジェ曲線を見てみましょう。効果は次のとおりです。

コードは次のとおりです。最初の 2 つのパラメーターは制御点の座標であり、最後の 2 つのパラメーターは水平方向と垂直方向の座標です。制御点の水平座標は「波の頂点」の水平座標と同じです。波の頂点の垂直座標は関連していることに注意してください。つまり、垂直座標が大きいほど、波のピークは高くなります。 context.closePath(); を開くと、効果は次のようになります:

まず、3 次ベジェ曲線を見てみましょう:

。

コードは次のとおりです:

context.beginPath();
context.moveTo(50,250);
//context.lineTo(50,250);
context.quadraticCurveTo(150,100,250,250);
//context.closePath();
context.stroke();

bezierCurveTo の 3 つのパラメーターは、それぞれ、最初の波の山または谷の水平座標と垂直座標、2 番目の波のピークの水平座標と垂直座標です。また、context .closePath();を開くと、曲線が閉じられ、その効果は次のようになります。上記は「Html5 Canvas 予備学習ノート (10) - 複雑なパス」の内容です。その他の関連コンテンツについては、PHP Chinese Net (www.php.cn) をご覧ください。