logo
BezierCurve
lang
lang
lang

オンラインベジェ曲線ツール

線形、二次曲線、三次曲線、波状曲線など、複数の曲線タイプをサポートするプロフェッショナルなベジェ曲線描画ツールです。ベジェ曲線の計算式、座標点の取得、SVG画像のエクスポート機能を提供します。

描画領域 クリックで点を追加、ドラッグで位置を調整

制御点: 0 | 曲線の次数: 0
曲線の式: なし
曲線の長さ: 0

プリセット曲線

線形曲線
二次曲線
三次曲線
波状曲線

コントロールパネル

コントロールポイント設定

曲線設定

粗い 100 細い
細い 3 太い

曲線情報

コントロールポイントの座標

点 X 座標 Y 座標 操作
コントロールポイントを追加後、座標がここに表示されます

曲線コード 

 
 
 
  
 
 
  画像をエクスポート 
 
   
 
 
 
 
  
 
 
ツールの説明

 
 
 
使用方法:
 
     
  • 「コントロールポイントを追加」ボタンをクリックするか、キャンバスをクリックしてコントロールポイントを追加します
    •  
  • コントロールポイントをドラッグします曲線の形状を調整する
    •  
  • 座標テーブル内の単一またはすべての座標をコピーできます
    •  
  • プリセット曲線を使用して、一般的な形状をすばやく作成できます
    •  
  • 生成されたSVGコードを他のプロジェクトにコピーできます
    •  
  • SVGファイルをダウンロードするか、PNG画像をエクスポートして表示または印刷できます
    •  
 
 
 
 
 ベジェ曲線指導ガイド

 
 
 
ベジェ曲線の原理
 

ベジェ曲線は、コンピュータグラフィックスにおけるパラメトリック曲線であり、制御点によって定義されます。ベクターグラフィックス、特にフォントデザインや3Dモデリングなどで広く使用されています。n次ベジェ曲線はn+1個の制御点によって定義され、再帰補間によって滑らかな曲線として生成されます。

 
 
 
 
応用シナリオ
 
     
  • UIデザインにおけるアニメーショントランジション
    •  
  • フォントデザインとベクターグラフィックス
    •  
  • ゲーム開発におけるモーショントラジェクトリ
    •  
  • CAD/CAMシステムにおける曲線モデリング
    •  
  • データビジュアライゼーションにおける滑らかな曲線
    •  
 
  
 
 基本概念

 
 
 
コントロールポイント
 
曲線の形状のキーポイントを定義します。コントロールポイントをドラッグすることで、曲線の形状をリアルタイムで調整できます。
  
 
 
t値パラメータ（パラメータt）
 
曲線上の点の位置を表す、0から1までの値を持つパラメータ。t=0は始点、t=1は終点を表します。
 
 
 
曲線次数（曲線次数）
 
制御点の数によって決定されます。n個の制御点はn-1次ベジェ曲線に相当します。
  
 
 
曲率
 
曲線の曲率の度合いを表す量。曲率が大きいほど、曲率が顕著になります。 
 
 
 
  
 
 t値の詳細な分析

 
 
t値は、ベジェ曲線。再帰補間のための**de Castellioアルゴリズム**を用いて計算されます。
 
 

    // ベジェ曲線の点を再帰的に計算します
    function bezier(t, points) {
        if (points.length == 1) return points[0];
        const newPoints = [];
        for (let i = 0; i < points.length - 1; i++) {
            n​​ewPoints.push(lerp(points[i], points[i+1], t));
        }
        return bezier(t, newPoints);
    }
    /**
    * 線形補間関数
    * @param {number|Object} a - 開始値または点
    * @param {number|Object} b - 終了値または点
    * @param {number} t - 補間パラメータ [0,1]
    * @returns {number|Object} 補間結果
    */
    function lerp(a, b, t) {
        if (typeof a === 'number') {
            return a + (b - a) * t;
        }
        else if (typeof a === 'object' && a.x !== undefined) {
            return {
                x: a.x + (b.x - a.x) * t,
                y: a.y + (b.y - a.y) * t
            };
        }
        else if (Array.isArray(a)) {
            return [
                a[0] + (b[0] - a[0]) * t,
                a[1] + (b[1] - a[1]) * t
            ];
        }
        else {
            throw new Error('Unsupported type for interpolation');
        }   
    }

 
 
     
  • 線形補間: 制御点の各ペア間のt値は線形補間されます
    •  
  • 再帰プロセス: 補間点が1つだけになるまで、新しい補間点が継続的に生成されます
    •  
  • 幾何学的な意味: t値は曲線生成プロセスにおける中間状態に対応します
    •  
 
 
  
 
 曲率と連続性

 
 
 
C0連続性
 
位置連続性。曲線セグメントは端点はつながっているが、鋭角な角を持つ場合がある。
  
 
 
G1 連続性
 
接線方向は連続しており、視覚的には滑らかですが、曲率は急激に変化することがあります。
 
 
 
C1 連続性
 
1次微分は連続しており、曲率は滑らかに変化します。
  
 
 
 
曲率計算式
 

κ(t) = |B'(t) × B''(t)| / |B'(t)|³

 
ここで、B'(t) は1次微分（正接）、B''(t) は2次微分です。
  
 
  
 
  実践チュートリアル

 
 
 1 
 
t値の動きを観察する
 
t値スライダーをドラッグし、曲線上の赤い点の動きの軌跡を観察して、パラメトリック曲線の概念を理解しましょう。
  
 
 
 2 
 
曲率の変化を分析する
 
曲率コームをオンにして、さまざまな領域における曲率の変化を観察し、制御点が曲線の曲率に与える影響。
  
 
 
 3 
 
接線方向解析
 
接線表示を有効にし、異なるt値における接線方向を観察し、曲線の局所的な特性を理解します。
 
 
 
 
  
 
 
プライバシーポリシー

 
 
オンラインベジェ曲線描画ツール（以下「本ツール」）へようこそ。当社はお客様のプライバシーを非常に重視しております。本ポリシーは、当社がお客様の情報をどのように収集、使用、保管、保護するかについて説明しています。 
 
 
 
1. 情報収集

 
このツールは、プライバシー保護を最優先に設計されています。ユーザーデータの収集は可能な限り最小限に抑えています。
 
     
  • 氏名、住所、電話番号、メールアドレスなどの個人を特定できる情報は一切収集しません。
    •  
  • ユーザーにアカウントの作成やログイン情報の提供を求めることはありません。
    •  
  • このツールはブラウザ内でローカルに実行されます。作成したベジェ曲線のデザインと関連データは、お客様のデバイスにのみ保存されます。
    •  
  • ページビュー、使用時間、機能の使用状況など、匿名の使用状況データを収集するために、基本的な分析ツールを使用しています。これらのデータは特定のユーザーに関連付けられません。
    •  
 
 
 
 
2. Cookieとローカルストレージ

 
より良いユーザーエクスペリエンスを提供するために、このツールは限定的なブラウザストレージ技術を使用しています。
 
     
  • ツール設定と曲線のデザインを保存するために、ローカルストレージ（localStorage）を使用します。このデータはお客様のデバイスにのみ保存されます。
    •  
  • お客様の設定（ライトモード/ダークモードの選択など）を保存するために、必要なCookieを使用する場合があります。
    •  
  • Google Analyticsなどの分析ツールを使用して、匿名の使用統計情報を収集します。これらのツールは、異なるユーザーセッションを区別するためにCookieを使用します。
    •  
  • ローカルストレージのデータは、ブラウザの設定からいつでも消去でき、Cookieの設定も管理できます。
    •  
 
 
 
 
3. データセキュリティ

 
当社はお客様のデータセキュリティを重視し、お客様の情報を保護するために合理的な措置を講じています。
 
     
  • すべてのデータ送信はHTTPS暗号化を使用しています。
    •  
  • お客様の曲線設計データは、お客様のローカルブラウザにのみ保存され、当社のサーバーに自動的にアップロードされることはありません。
    •  
  • 当社は、システムおよびお客様がアクセスする可能性のある情報を保護するために、セキュリティ対策を定期的に見直し、更新しています。提供します。
    •  
  • 当社はデータ保護のために合理的な措置を講じておりますが、インターネットを介したデータ送信は100%安全であるとは保証できませんのでご了承ください。
    •  
 
 
 
 
4. データの共有と開示

 
当社はお客様のプライバシーを尊重し、お客様の情報を販売、取引、または譲渡することはありません。
 
     
  • 当社は、個人を特定できる情報を収集していないため、いかなる個人情報も第三者と共有することはありません。
    •  
  • 当社は、ツールの使用状況を分析するために、Google Analyticsなどのサードパーティサービスプロバイダーを使用する場合があります。これらのサービスプロバイダーは、匿名化された集計データにのみアクセスできます。
    •  
  • 当社は、法律で義務付けられている場合、ウェブサイトポリシーを施行する場合、または当社または他者の権利、財産、安全を保護するために、情報を開示することがあります。
    •  
 
 
 
 
5. プライバシーポリシーの変更

当社は、本プライバシーポリシーを随時更新することがあります。
 
     
  • 本ポリシーの変更は、このページに更新版が掲載された時点で有効になります。
    •  
  • 変更があった場合は、このページ上部の「最終更新日」を更新することでお知らせします。
    •  
  • このプライバシーポリシーの変更を定期的にご確認ください
    •  
  • このツールを引き続きご利用いただくことで、更新されたプライバシーポリシーに同意したことになります
    •  
 
 
 
 
6. お問い合わせ

このプライバシーポリシーに関するご質問やご提案がございましたら、以下の方法でお問い合わせください。
 
     
  • メールアドレス: privacy#beziercurve.net
    •  
  • お問い合わせにはできるだけ早く、通常5営業日以内にご返信いたします
    •  
 
 
 
重要なお知らせ
 
このツールをご利用いただくことで、本プライバシーポリシーの条件に同意したものとみなされます。条件に同意しない場合は、本ツールの使用を中止してください。
 
 
本プライバシーポリシーは、2025年9月3日に最終更新されました。