ベジェ曲線

ベジェ曲線（ベジェきょくせん、（英: Bézier curve）は N+1 個の制御点から得られる N 次曲線である。ベジエ曲線とも。 パラメータ t ∈ R ,   0 ≤ t ≤ 1 {\displaystyle t\in {\mathbb {R}},\ 0\leq t\leq 1} 、 N + 1 {\displaystyle N+1} 個のベクトル { B i   |   i ∈ { 0 , 1 , . . . , N } } {\displaystyle \{\mathbf {B} _{i}\ |\ i\in \{0,1,...,N\}\}} （制御点）、 N {\displaystyle N} 次バーンスタイン基底関数 J N , i ( t ) {\displaystyle J_{N,i}(t)} を用いて、 N {\displaystyle N} 次のベジェ曲線は以下のように定義される： P ( t ) = ∑ i = 0 N B i J N , i ( t ) = ∑ i = 0 N B i ( N i ) t i ( 1 − t ) N − i {\displaystyle \mathbf {P} (t)=\sum _{i=0}^{N}\mathbf {B} _{i}J_{N,i}(t)=\sum _{i=0}^{N}\mathbf {B} _{i}{N \choose i}t^{i}(1-t)^{N-i}} この形式でのベジェ曲線の定義は「ベジェ曲線のバーンスタイン表現」とも呼ばれる。 N {\displaystyle N} 次のベジェ曲線は幾何的な手続きによっても定義される。このアルゴリズムはド・カステリョのアルゴリズム（英語版）と呼ばれる。 N 次ベジェ曲線の始点は端の制御点 B 0 {\displaystyle \mathbf {B} _{0}} と、終点はもう一方の端の制御点 B N {\displaystyle \mathbf {B} _{N}} と一致する。 バーンスタイン基底関数は J N , i ( 0 ) = δ i , 0 {\displaystyle J_{N,i}(0)=\delta _{i,0}} , J N , i ( 1 ) = δ i , N {\displaystyle J_{N,i}(1)=\delta _{i,N}} である（⇒バーンスタイン多項式#バーンスタイン基底関数の特性）。よってベジェ曲線を構成する殆どの項は端点において 0 となり P ( 0 ) = B 0 1 {\displaystyle \mathbf {P} (0)=\mathbf {B} _{0}1} , P ( 1 ) = B N 1 {\displaystyle \mathbf {P} (1)=\mathbf {B} _{N}1} となる。つまり始点 P ( 0 ) {\displaystyle \mathbf {P} (0)} が B 0 {\displaystyle \mathbf {B} _{0}} と、終点 P ( 1 ) {\displaystyle \mathbf {P} (1)} が B N {\displaystyle \mathbf {B} _{N}} と一致する。 ベジェ曲線は制御点座標の加重平均と見做せる。 バーンスタイン基底関数は常に和が1であり（⇒バーンスタイン多項式#1の分割）、かつ 0 ≤ t ≤ 1 {\displaystyle 0\leq t\leq 1} において非負である（⇒バーンスタイン多項式#区間非負）。よってベジェ曲線上の点 P(t=T) は各制御点 Bi が Jn, i(T) で重みづけされた加重平均と見做せる。この意味で各バーンスタイン基底関数は混合比とも呼ばれる。 ベジェ曲線の端点を除いた領域は、その座標が全ての制御点の座標から影響を受ける。 ベジェ曲線は制御点座標の加重平均であり（⇒#制御点の加重平均）、その重みであるバーンスタイン基底関数は 0 < t < 1 {\displaystyle 0<t<1} において常に正である（⇒バーンスタイン多項式#区間正値）。よって端点以外では全制御点の座標が大なり小なり曲線の各点へ反映されている。端点は例外であり、単一制御点の座標のみで決定される。 ベジェ曲線は一般には両端以外の制御点は通らない。 ベジェ曲線の制御点の加重平均特性により、制御点を必ず通る t = T が存在するなら Jn, i(T) が i = I で 1、他で 0 になる点があるはずである。図からわかるように、これは t = 0 or 1 のみに限られる。よって一般にはベジェ曲線は両端以外の制御点を通らない。制御点の座標によっては加重平均がたまたまある制御点と一致する場合がありうるので、制御点を通るのが常に両端のみ、というわけではない。 ベジェ曲線は制御点の数に基づいて分類される。以下はその一例である。 2次ベジェ曲線（英語版）（にじベジェきょくせん、（英: quadratic Bézier curve）は3つの制御点で構成されるベジェ曲線である。 2次ベジェ曲線は次の式で定義される： P ( t ) = ∑ i = 0 2 B i J 2 , i ( t ) = ( 1 − t ) 2 B 0 + 2 t ( 1 − t ) B 1 + t 2 B 2 = ( B 0 − 2 B 1 + B 2 ) t 2 + ( − 2 B 0 + 2 B 1 ) t + B 0 {\displaystyle {\begin{aligned}\mathbf {P} (t)&=\sum _{i=0}^{2}\mathbf {B} _{i}J_{2,i}(t)\\&=(1-t)^{2}\mathbf {B} _{0}+2t(1-t)\mathbf {B} _{1}+t^{2}\mathbf {B} _{2}\\&=(\mathbf {B} _{0}-2\mathbf {B} _{1}+\mathbf {B} _{2})t^{2}+(-2\mathbf {B} _{0}+2\mathbf {B} _{1})t+\mathbf {B} _{0}\\\end{aligned}}} 上式よりベジェ曲線の性質を満たすことが容易に確認できる。t の次数より2次ベジェ曲線は高々2次の曲線であると確認でき、代入によりP(0) = B0 と P(1) = B2 で両端制御点の通過が確認できる。 3次ベジェ曲線（英語版）（さんじベジェきょくせん、（英: cubic Bézier curve）は4つの制御点で構成されるベジェ曲線である。 3次ベジェ曲線は次の式で定義される： P ( t ) = ∑ i = 0 3 B i J 3 , i ( t ) = ( 1 − t ) 3 B 0 + 3 t ( 1 − t ) 2 B 1 + 3 t 2 ( 1 − t ) B 2 + t 3 B 3 = ( − B 0 + 3 B 1 − 3 B 2 + B 3 ) t 3 + ( 3 B 0 − 6 B 1 + 3 B 2 ) t 2 + ( − 3 B 0 + 3 B 1 ) t + B 0 {\displaystyle {\begin{aligned}\mathbf {P} (t)&=\sum _{i=0}^{3}\mathbf {B} _{i}J_{3,i}(t)\\&=(1-t)^{3}\mathbf {B} _{0}+3t(1-t)^{2}\mathbf {B} _{1}+3t^{2}(1-t)\mathbf {B} _{2}+t^{3}\mathbf {B} _{3}\\&=(-\mathbf {B} _{0}+3\mathbf {B} _{1}-3\mathbf {B} _{2}+\mathbf {B} _{3})t^{3}+(3\mathbf {B} _{0}-6\mathbf {B} _{1}+3\mathbf {B} _{2})t^{2}+(-3\mathbf {B} _{0}+3\mathbf {B} _{1})t+\mathbf {B} _{0}\\\end{aligned}}} 上式よりベジェ曲線の性質を満たすことが容易に確認できる。t の次数より3次ベジェ曲線は高々3次の曲線であると確認でき、代入による P(0) = B0 と P(1) = B3 で両端制御点の通過が確認できる。 P(t) を t で1階微分し端の制御点を代入することで、端点での接線ベクトルが求まる。これにより、 d P ( t ) d t = ∑ i = 0 3 B i J 3 , i ( t ) = − 3 ( 1 − t ) 2 B 0 + ( 9 t 2 − 12 t + 3 ) B 1 + ( − 9 t 2 + 6 t ) B 2 + 3 t 2 B 3 = 3 ( − B 0 + 3 B 1 − 3 B 2 + B 3 ) t 2 + 2 ( 3 B 0 − 6 B 1 + 3 B 2 ) t + 3 ( − B 0 + B 1 ) {\displaystyle {\begin{aligned}{d\mathbf {P} (t) \over dt}&=\sum _{i=0}^{3}\mathbf {B} _{i}J_{3,i}(t)\\&=-3(1-t)^{2}\mathbf {B} _{0}+(9t^{2}-12t+3)\mathbf {B} _{1}+(-9t^{2}+6t)\mathbf {B} _{2}+3t^{2}\mathbf {B} _{3}\\&=3(-\mathbf {B} _{0}+3\mathbf {B} _{1}-3\mathbf {B} _{2}+\mathbf {B} _{3})t^{2}+2(3\mathbf {B} _{0}-6\mathbf {B} _{1}+3\mathbf {B} _{2})t+3(-\mathbf {B} _{0}+\mathbf {B} _{1})\\\end{aligned}}} d P ( 0 ) d t = 3 ( − B 0 + B 1 ) = 3 B 0 B 1 → d P ( 1 ) d t = 3 ( − B 2 + B 3 ) = 3 B 2 B 3 → {\displaystyle {\begin{array}{lcl}{d\mathbf {P} (0) \over dt}&=&3(-\mathbf {B} _{0}+\mathbf {B} _{1})&=3{\overrightarrow {\mathbf {B} _{0}\mathbf {B} _{1}}}\\{d\mathbf {P} (1) \over dt}&=&3(-\mathbf {B} _{2}+\mathbf {B} _{3})&=3{\overrightarrow {\mathbf {B} _{2}\mathbf {B} _{3}}}\\\end{array}}} となり、端点とその隣の制御点で端点の接線が定まることがわかる。 前節の数式を適宜変形するなどして、コンピュータプログラムに実装すれば描画はできるわけだが、以下では3次のベジェ曲線（4個の制御点で示される曲線）を例として、手作業を念頭に置いた作図法を示す。この手順を基にした描画プログラムにも有用性があり、また人によってはベジェ曲線の性質を直観的に把握するにも有効かもしれない。 右図の P0, P1, P2, P3 が与えられた制御点である。今、ベジェ曲線の P0 から t (0 < t < 1) の比率の位置の点の座標を求めるためには、次のように計算すればよい。 まず、制御点を順に結んで得られる3つの線分 P0P1, P1P2, P2P3（水色の折れ線）をそれぞれ t : 1 − t の比率で分割する点、P4, P5, P6 を求める。 次に、これらの点を順に結んで得られる2つの線分 P4P5, P5P6（橙色の折れ線）を再びそれぞれ t : 1 − t の比率で分割する点 P7, P8 を求める。 最後に、この2点を結ぶ線分 P7P8（緑色の線分）をさらに t : 1 − t の比率で分割する点 P9 を求めると、この点がベジェ曲線上の点となる。 この作業を 0 < t < 1 の範囲で繰り返し行うことにより、P0, P1, P2, P3 を制御点とする3次ベジェ曲線（赤色の曲線）が得られる。 複合ベジェ曲線（英語版）（英: composite Bézier curve）はベジェ曲線を1つのセグメントとして複数セグメントを直列に接続した曲線である。ベジェスプライン（英: Bézier spline）、ポリベジェ曲線（英: polybezier）とも。 N次ベジェ曲線は次数を変えずに延長できない。なぜなら延長のために制御点を追加することで次数も増加するからである。またN次ベジェ曲線は既存区間に影響を与えずに延長できない。なぜなら全制御点の反映という特性により新しい制御点座標が既存の区間にも反映されるからである。 これに対する方策にはスプライン曲線をはじめとした区分多項式がある。区分多項式ではある区間を1つの多項式で表現し、その続きの区間を別の多項式で表現し、曲線全体を複数の多項式で構成する。新しい区間の多項式は既存区間と独立しているため、上記の次数増や既存区間影響の問題を回避できる。これを採用し、ベジェ曲線で各区分を表現した区分多項式が composite Bézier curve である。 composite Bézier curve はセグメント間の連結に関して制約を置いていない。ゆえに composite Bézier curve 一般には連続性や滑らかさに関する保証がない。これはスプライン曲線・B-スプライン曲線との違いである。一方で適切な制約を課すことで連続性や滑らかさが保証された composite Bézier curve のサブタイプを見出すことができる。 composite Bézier curve の連続性はセグメントの終点制御点と隣接セグメントの始点制御点を共有する制約により保証できる。これは端点と端制御点の一致特性より明らかである。 composite Bézier curve の滑らかさはセグメント間で端点での接線を共有する制約により保証できる。これはパラメータに対する一階微分が端点で一致することと等しい。 3次ベジェ曲線からなるポリベジェ曲線は複雑な図形を描くためによく実利用されるため、様々な作図法が考案されている。またベジェ曲線の数学的理解無しで直感的にポリベジェ曲線を描くために、いくつかの用語がしばしば導入されている。 アンカーポイント（英: anchor point）はセグメント端点にある制御点の別名である。頂点（英: vertex）、パスポイント（英: path point）、通過点とも。端点と端制御点の一致特性により、ベジェ曲線はアンカーポイント間を繋ぐ曲線とみなせる。セグメントが通らない制御点（=方向ハンドル）との区別を直感的にするためにこの用語が導入されている。 方向ハンドル（ほうこうハンドル、（英: direction handle）はセグメント端点の隣にある制御点の別名である。方向点とも。方向線の先端に位置する。アンカーポイントと区別することで直接曲線は通らないが曲がり方を決定づけるということを直感的に理解できる。 方向線（ほうこうせん、（英: direction line）はセグメント端点から隣の制御点へ伸びる直線である。3次ベジェ曲線では端点での接線ベクトルが隣の制御点へ伸びるベクトルと同じ向きであるため（詳細: #3次ベジェ曲線）、方向線の概念を導入すれば端点での傾きと隣接制御点（=方向ハンドル）の位置を同時に視認できる。 ポリベジェ曲線は滑らかさの保証に制約を要する（⇒#滑らかさの保証）。これは各アンカーポイントから伸びる2つの方向線のあいだにどのような制約を課すかで表現できる。 方向線が左右対称であれば接線が一致するため必ず滑らかになる。この制約が課されたアンカーポイントはスムーズポイント（英: smooth point）、設定そのものはシンメトリック（英: symmetric）、曲線、スムーズ（英: smooth） などと呼称される。 多くのソフトウェアでは「mousedown でアンカーポイント設定、drag で方向ハンドル調整、mouseup で確定」を繰り返すことで滑らかなポリベジェ曲線を作図できる。2ハンドルの連動（smooth 状態）を alt で切り離す、といった操作もしばしば実装されている。 ベジェ曲線は様々な目的・用途に利用されている。 具体的には、ベジェ曲線は視覚芸術（絵画・アニメ・3DCGなど）に利用され、輪郭線の直接表現（参考: ドローソフト）、手書き線の補正（参考: ペイントソフト）、物体配置の補助線などとして用いられる。またフォント・カリグラフィー・タイポグラフィに利用される。工業デザインでも利用され、設計図中の物体を表現する曲線として直接表現される。GUIではグラフ型設定値の表現として用いられる。 ベジェ曲線のなかでも2次ベジェ曲線と3次ベジェ曲線は広く利用されている。特に3次ベジェ曲線は、始点と第1制御点を結ぶ線分が始点における曲線の接線になり、第2制御点と終点を結ぶ線分が終点における曲線の接線になるため、直感的に理解しやすく多用される。 ベジェ曲線は様々なプラットフォームでサポートされている。 PostScriptやそのフォント (Type1フォント)、SVGやHTML5のcanvasで3次ベジェ曲線を利用できる。Microsoft WindowsのGDI/GDI+、Direct2D、.NET FrameworkのSystem.Drawing.Drawing2D.GraphicsPath、WPFのSystem.Windows.Media.BezierSegmentでは3次ベジェをサポートする。AWT（Java 1.2以降で追加されたQuadCurve2D, CubicCurve2Dの派生クラス）、SkiaのSkPathおよびAndroidのandroid.graphics.Pathは2次と3次のベジェ両方をサポートする。 ベジェ曲線はフランスの自動車メーカー、シトロエン社のド・カステリョ（英語版） とルノー社のピエール・ベジェにより独立に考案された。ド・カステリョの方が先んじていたが、その論文が公知とならなかったためベジェの名が冠されている。 原語（フランス語）における Bézier の発音はベズィエに近く、「ベジェ曲線」より「ベジエ曲線」の方がこれに忠実と言えるが、いずれの呼称も用いられている。 ベジェ曲面（曲面パッチなどとも）と呼ばれるような、3次元空間内の曲面への拡張にはいくつか手法がある。たとえば、目的の曲面においてパッチの端点となる3点とその3点における接平面を指定するという方法や、4点を指定し2方向のクロスハッチングのようにして面を構成するという方法がある。 ^ 「複合ベジェ曲線」は仮訳。アカデミックな邦訳がまだ存在していない可能性が高い。 ^ 3次ベジェ曲線は始点と第1制御点の距離によって始点付近の曲率が制御できるため補正用途に向く。 ^ "N 次ベジェ曲線 ... P ( t ) = ∑ i = 0 N n C i t i ( 1 − t ) n − i P i {\displaystyle P(t)=\sum _{i=0}^{N}{}_{n}C_{i}t^{i}(1-t)^{n-i}P_{i}} さらなる一般化 P ( t ) = ∑ i = 0 N B i n P i {\displaystyle P(t)=\sum _{i=0}^{N}B_{i}^{n}P_{i}} " 金森 2017 より引用。 ^ "ベジェ曲線 x ( t ) = b 0 n ( t ) {\displaystyle x(t)=b_{0}^{n}(t)} は次のように表示される： x ( t ) = b 0 n ( t ) = ∑ j = 0 n B j n ( t ) b j {\displaystyle x(t)=b_{0}^{n}(t)=\sum _{j=0}^{n}B_{j}^{n}(t)b_{j}} これをベジェ曲線のベルンシュタイン表現という。" 浦川 2004 より引用。 ^ "ベジエ曲線のベルンシュタイン多項式による表現 b 0 n ( t ) = ∑ j = 0 n b j B j n ( t ) ( 6 ) {\displaystyle b_{0}^{n}(t)=\sum _{j=0}^{n}b_{j}B_{j}^{n}(t)\quad (6)} を得る．これを，ベジエ曲線のベルンシュタイン表現とよぶ．" 坂根 2005b, p. 15 より引用。 ^ "ド・カステリョのアルゴリズムから得られる曲線 b 0 n ( t ) {\displaystyle b_{0}^{n}(t)} を ... ベジエ曲線と呼ぶ．" 坂根 2005a, p. 9 より引用。 ^ a b c " P ( t ) = ∑ i = 0 n B i n P i B i n = n C i t i ( 1 − t ) n − i {\displaystyle P(t)=\sum _{i=0}^{n}B_{i}^{n}P_{i}\qquad B_{i}^{n}={}_{n}\!C_{i}t^{i}(1-t)^{n-i}} ある比率で各制御点の座標を混ぜ合わせる ... 混合比（和は 1 になる） 混合比を関数で表したものを「基底関数」とよぶ" 金森 2017 より引用。 ^ "ベジェ曲線上の点P（t）は、制御点Piの加重平均として定義される。" p.236 より引用。谷口. (2000). 制御点方式による曲線形状の生成. 長野大学紀要, 22巻3号, pp.234-242. ^ "２次ベジェ曲線 P ( t ) = ( 1 − t ) 2 P 0 + 2 t ( 1 − t ) P 1 + t 2 P 2 {\displaystyle P(t)=(1-t)^{2}P_{0}+2t(1-t)P_{1}+t^{2}P_{2}} " 金森 2017 より引用。 ^ "3 次ベジェ曲線は 4 個の制御点を持つ曲線" p.106 より引用。金 澤. (2015). パラメトリック曲線を用いたノンパラメトリック形状最適化法に関する研究. 三重大学学術機関リポジトリ. ^ "3 次ベジェ曲線の性質 ... 第 1, 2 制御点で終点での接線が決まる ... 第 ３,４ 制御点で終点での接線が決まる" 金森 2017 より引用。 ^ a b "ベジェスプライン曲線を用いる利点 ... 制御点の影響の局所性により制御点を編集した際の影響を曲線の一部分に限定できる" p.4 より引用。中野. (2002). 利用者の動作と連動する仮想ファッション. インタラクション2002論文集, pp.231-238. ^ "ベジェ曲線ではセグメント間の連続性は保証されていなかった" 以下より引用。三谷 (2020), “第6回 曲線・曲面の表現「Ｂスプライン曲線」”, 筑波大学講義 コンピュータグラフィックス基礎, https://mitani.cs.tsukuba.ac.jp/lecture/2020/cg_basics/06/06_slides.pdf  ^ "複数セグメントの連結 ... 2 つのセグメントで端点を共有する（制御点位置の共有, C0連続） " 金森 2017 より引用。 ^ a b "複数セグメントの連結 ... 2 つのセグメントで接線を共有する （制御点が同一直線上で等距離，C1連続） ← 1 階微分が接続点で同値" 金森 2017 より引用。 ^ "頂点は、パスの各セグメントの開始点と終了点です。他の Adobe アプリケーションでは、頂点のことをアンカーポイントまたはパスポイントと呼ぶ場合もあります。" Adobe. ベクトルグラフィックとラスター画像について. After Effects ユーザーガイド. 2024-10-13閲覧. ^ "[3次ベジェ]は、複数の通過点と方向点で構成される曲線を描画できます。... 1つ目の曲線を終了したい位置からドラッグを開始すると、ドラッグの開始位置に通過点が作成される" CLIP STUDIO PAINT. 連続曲線サブツール・ベジェ曲線サブツール. User Guide. 2024-10-13閲覧. ^ "[3次ベジェ]は、複数の通過点と方向点で構成される曲線を描画できます。... 方向点が表示されます。マウスを動かすと曲線の曲がり具合を調整できます。曲線の位置を決めたらマウスのボタンを離します。" CLIP STUDIO PAINT. 連続曲線サブツール・ベジェ曲線サブツール. User Guide. 2024-10-13閲覧. ^ "各頂点の方向線（すなわち接線）" Adobe. ベクトルグラフィックとラスター画像について. After Effects ユーザーガイド. 2024-10-13閲覧. ^ "スムーズポイントでは、パスセグメントは連続する曲線として連結されます。つまり、入ってくる方向と出て行く方向が同じ線上にあります。... スムーズポイントで方向線を移動すると、ポイントの両側の曲線が同時に調整されます。" Adobe. ベクトルグラフィックとラスター画像について. After Effects ユーザーガイド. 2024-10-13閲覧. ^ a b "Krita has several node-types that allow you control the side handles more efficiently. These are the corner, smooth and symmetric modes. ... Symmetric ... the symmetric node will force handles to always point in opposite directions and have the same length." Krita. Tools » Shape Edit Tool. Krita Reference Manual. 2024-10-13閲覧. ^ "通過点の状態を角と曲線のいずれかに変更できます。... 通過点を曲線にすると、2つの方向点が連動した状態で操作できます。" CLIP STUDIO PAINT. 連続曲線サブツール・ベジェ曲線サブツール. User Guide. 2024-10-13閲覧. ^ "smooth curveto ... Draws a cubic Bézier curve from the current point ... The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point." 以下より引用。W3C (2018年10月). “Scalable Vector Graphics (SVG) 2”. World Wide Web Consortium. 2024年9月9日閲覧。 ^ Line and Curve Functions - Windows applications | Microsoft Docs ^ ID2D1GeometrySink::AddBezier(const D2D1_BEZIER_SEGMENT) (d2d1.h) | Microsoft Docs ^ D2D1_BEZIER_SEGMENT (d2d1.h) | Microsoft Docs ^ GraphicsPath.AddBezier Method (System.Drawing.Drawing2D) | Microsoft Docs ^ BezierSegment Class (System.Windows.Media) | Microsoft Docs ^ Geometric Primitives (The Java™ Tutorials > 2D Graphics > Overview of the Java 2D API Concepts) ^ skia/SkPath.h at master · google/skia ^ Path | Android Developers ^ 鳥谷浩志; 千代倉弘明 (1991). 3次元CADの基礎と応用. 共立出版. ISBN 9784320025394  金森「第5回 曲線・曲面の表現 「ベジェ曲線」」『筑波大学講義 コンピュータグラフィックス基礎』2017年。https://kanamori.cs.tsukuba.ac.jp/lecture/old2017/cg_basics/05/05_slides.pdf。  坂根「ベジエ曲線とベジエ曲面１」『大阪大学講義 主題別』2005a。http://www4.math.sci.osaka-u.ac.jp/~sakane/shudaibetu/05Bezier1.pdf。  坂根「ベジエ曲線とベジエ曲面２」『大阪大学講義 主題別』2005b。http://www4.math.sci.osaka-u.ac.jp/~sakane/shudaibetu/05Bezier2.pdf。  浦川, 肇 (2004). “数学と工学との出会い - 離散系を中心に”. 数学通信 9 (3): 5-17. https://www.mathsoc.jp/publication/tushin/903/urakawa0.pdf.  ウィキメディア・コモンズには、ベジェ曲線に関連するカテゴリがあります。 Adobe Illustrator CorelDRAW Canvas スプライン曲線 B-スプライン曲線 『ベジェ曲線の定義と4つの性質』 - 高校数学の美しい物語