blob: 2dc83803046353f16040c0f0869492fa5e283576 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
---
title: Bézier curve (ベジェ曲線)
slug: Glossary/Bézier_curve
tags:
- Bézier curve
- Glossary
- Graphics
- Reference
- ベジェ曲線
translation_of: Glossary/Bézier_curve
---
<p>ベジェ曲線は、コンピューターグラフィックスとアニメーションで使用される数学的に記述された曲線です。{{Glossary("vector image", "ベクター画像")}}では、無期限に拡大できる滑らかな曲線をモデル化するために使用されます。.</p>
<p>ベジェ曲線は、最低 2 つの制御点のセットによって定義されます。ウェブ関連のグラフィックスとアニメーションは、4 つの制御点 P<sub>0</sub>, P<sub>1</sub>, P<sub>2</sub>, P<sub>3</sub> を持つ曲線である 3 次ベジェ曲線を使用します。</p>
<p>曲線を描くために、P<sub>0</sub> から P<sub>1</sub> までと P<sub>1</sub> から P<sub>2 </sub>までの 2 本の想像上の線（ヘルパーライン）が描かれます。線の終点は、次の点に徐々に移動します。3 番目の想像上の線は、最初のヘルパーライン上を徐々に移動する点を始点、2 番目のヘルパーライン上を徐々に移動する点を終点として描画されます。 この想像上の線上に、始点から終点まで徐々に移動する点が描かれます。 この点が描く曲線がベジェ曲線です。下記の図は、曲線の作成を示すアニメーションです。</p>
<p><img alt="Drawing a Bézier curve" src="https://upload.wikimedia.org/wikipedia/commons/d/db/B%C3%A9zier_3_big.gif"></p>
<h2 id="Learn_more" name="Learn_more">関連情報</h2>
<h3 id="General_knowledge" name="General_knowledge">一般知識</h3>
<ul>
<li><a href="https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A7%E6%9B%B2%E7%B7%9A">Wikipedia のベジェ曲線の記事</a></li>
</ul>
<h3 id="Learn_about_it" name="Learn_about_it">参考記事</h3>
<ul>
<li><a href="/ja/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing_functions">CSS の三次元ベジェタイミング関数</a></li>
<li>{{SVGAttr("keySplines")}} SVG 属性</li>
<li><a href="/ja/docs/Web/CSS/Tools/Cubic_Bezier_Generator">三次元ベジェジェネレーター</a></li>
</ul>
|
