ベジェ曲線を描画します。
ベジェ曲線は、緩やかに傾斜する形状や曲線を形成することができます。2つのアンカーポイントと2つの制御点によって定義されます。ベジェ曲線は、curve()関数で作成されるスプライン曲線よりも多くの制御を提供します。
最初の2つのパラメータ、x1とy1は、最初のアンカーポイントを設定します。最初のアンカーポイントは曲線の開始点です。
次の4つのパラメータ、x2、y2、x3、y3は、2つの制御点を設定します。制御点は曲線を自身に向かって「引っ張る」効果があります。
7番目と8番目のパラメータ、x4とy4は、最後のアンカーポイントを設定します。最後のアンカーポイントは曲線の終点です。
ベジェ曲線はWebGLモードを使用して3Dでも描画できます。3Dバージョンのbezier()は、各点がx、y、z座標を持つため、12個の引数を持ちます。
実例
シンタックス
bezier(x1, y1, x2, y2, x3, y3, x4, y4)bezier(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)パラメーター
x1
Number:
最初のアンカーポイントのx座標。
y1
Number:
最初のアンカーポイントのy座標。
x2
Number:
最初の制御点のx座標。
y2
Number:
最初の制御点のy座標。
x3
Number:
2番目の制御点のx座標。
y3
Number:
2番目の制御点のy座標。
x4
Number:
2番目のアンカーポイントのx座標。
y4
Number:
2番目のアンカーポイントのy座標。
z1
Number:
最初のアンカーポイントのz座標。
z2
Number:
最初の制御点のz座標。
z3
Number:
2番目の制御点のz座標。
z4
Number:
2番目のアンカーポイントのz座標。
Notice any errors or typos? Please let us know. Please feel free to edit src/core/shape/curves.js and open a pull request!