[キャンバス]基礎研究ノート（B）

ベジェ曲線

1.1どのようなベジェ曲線

　　ベジェ曲線（ベジェ曲線）は、数学的曲線の二次元のグラフィックス用途に使用されます。正確にベジェ曲線セグメントおよびノードによって、ノードは、我々はこれを行うには、描画ツールに表示支点ドラッグ、伸縮自在のゴムバンドの画像ラインは、ペンツールであるが、曲線を描くための一般的なベクトルグラフィックソフトウェア曲線ベクター種。

　　ベジェ曲線は、それが曲線の方程式によって記述される、コンピュータグラフィックスにおける重要パラメトリック曲線である方程式の最高順序に従って、ベジェ曲線は、直線、2次ベジエ次曲線卑に分けることができますソウル曲線と高次ベジェ曲線。

1）2次ベジエ曲線

　 3点により、二次ベジェ曲線P0、P1が、P2は、下記のように決定され、これらの点も、制御点と呼ばれます。

　二次ベジェ曲線を描くために我々は理解することができます：

まず、線分P0P1及びP1P2はそれぞれ上の点を選択Q0、Q1を、そのようなP0Q0 / P1Q1 = P0P1 / P1P2 = T 、範囲[0,1]内のTの値。
コネクタQ0、Q1を、線分Q0Q1点選択Bを、その結果/ Q0Q1 = P0Q0 / P1Q1 = P0P1 / P1P2 = TへQ0B点が曲線上にあるこの時、B。
0から1への遷移Tの値は、上記の手順を繰り返し、すべての計算された点B、すべての適格な接続点Bは、2次ベジエ曲線を得ることが可能です。

2）キュービックベジエ曲線

　フォーポイントによってキュービックベジエ曲線P0、P1の、P2、P3が決定され、以下に示すように、これらの点も、制御点と呼ばれます。

　似た次ベジェ曲線と二次ベジェ曲線を描くが、彼つ以上のコントロールポイントなので、二次ベジェ段階以上の間、点Bを探します。

まず、線分P0P1、P1P2、P2P3はそれぞれ上の点を選択Q0を、Q1を、Q2、そうP0Q0 / P0P1 = P1Q1 / P2Q2 = P1P2 / P2P3 = T、Tが範囲内にある[0,1]。
コネクタQ0、Q1を、Q1を、Q2それぞれ、線分Q0Q1、Q1Q2のは、点選択R0、R1を、そのようなQ1Q2のQ0R0 / Q0Q1 = Q1R1 / Tを=。
接続R0、RLは、線分R0R1は、点選択Bのように、R0B / T = R0R1、ケースBの点は、グラフです。
0から1への遷移Tの値は、上記の手順を繰り返し、すべての計算された点B、すべての適格な接続点Bは、立方ベジェ曲線を得ることが可能です。

1.2ベジェ曲線ドロー

　　Cのanvasは、二次ベジェ曲線と立方ベジェ曲線を描画するための方法を提供します

1）2次ベジエ曲線

　　quadraticCurveTo（CX、CY、X、Y）：これまでの2次ベジエ曲線、（x、y）を描画を開始するために、現在の位置から、及び（CX、CY）における制御点として。

1つの VARキャンバス=のdocument.getElementById（ 'マイキャンバス' ）;
 2  IF （canvas.getContext）{
 3。     VAR CTX = canvas.getContext（ '2D' ）;
 4      ctx.beginPath（）;
 5      ctx.moveTo（50、 200）; //は、開始点
6。      ctx.quadraticCurveTo（100、50、250、230）; // （100、50）：制御点;（250230）：エンドポイント
。7      ctx.stroke（）;
 8  
。9      ctx.beginPath （）;
 10      ctx.fillRect（50、200 ,. 5 ,. 5）; // 矩形始点マーク
11。      ctx.fillRect（100、50 ,. 5 ,. 5）; // 矩形の描画制御点
12     ctx.fillRect（250、230 ,. 5 ,. 5）; // 矩形の終点マーク
13 }

2）キュービックベジエ曲線

　　いるbezierCurveTo（CX1、CY2、CX2、CY2、X、Y）：立方ベジェ曲線を描画する現在位置から、（x、y）は、これまで、及び（CX1、CY1）において、（CX2、CY2）制御点として

1つの VARキャンバス=のdocument.getElementById（ 'マイキャンバス' ）;
 2  IF （canvas.getContext）{
 3。     VAR CTX = canvas.getContext（ '2D' ）;
 4      ctx.beginPath（）;
 5      ctx.moveTo（50、 200）; //は、開始点
6。      ctx.bezierCurveTo（80、50、180、30、250、230）; // （80、50）、（180、30）：制御点1（250230）：エンドポイント
7      ctx.stroke（）;
 8  
9。     ctx.beginPath（）;
 10      ctx.fillRect（50、200 ,. 5 ,. 5）; // 矩形始点マーク
11      ctx.fillRect（80、50 ,. 5 ,. 5）; / / 長方形の点の制御をマーキング
12れる      ctx.fillRect（180、30 ,. 5 ,. 5）; // タグ2の制御点の長方形
13は      ctx.fillRect（250、230 ,. 5 ,. 5）; // 矩形の終点マーク
14 }

第二に、テキストを描画

テキストとグラフィックスは、常に手をつないで行くので、キャンバスは、テキストを描画するための2つの方法が用意されています。

　　strokeText（テキスト、X、Y [、のmaxWidth]）

　　fillText（テキスト、X、Y [、のmaxWidth]）

パラメータ：

テキスト：テキスト文字列が描画されます
X：X座標
Y：Y座標
maxWidth：描かれた、オプションのパラメータの最大幅

また、3つのプロパティのためのキャンバスを提供しながら、この記事にスタイルを追加します。

フォント：「10pxののサンセリフ」：同じCSSの構文デフォルトではテキストスタイル、およびフォントサイズ、属性値の文字列、およびフォントプロパティを設定するために使用。
textAlign：テキストの配置を設定するために使用可能な値は、開始、終了、左、右、ある中央、デフォルト値のスタート。
TextBaseline：テキストのベースラインの配置を設定するには、可能な値は、トップしている、ぶら下げ、ミドル、アルファベット、表意文字、下は、デフォルトではアルファベットです。

1つの VARキャンバス=のdocument.getElementById（ 'マイキャンバス' ）;
 2  IF （canvas.getContext）{
 3。     VAR CTX = canvas.getContext（ '2D' ）;
 4      ctx.font = '20ピクセルのArial' ;
 5      ctx.textAlign = 'スタート' ;
 6      ctx.textBaseline = 'トップ' ;
 。7      ctx.fillText（、150、50 '自分の鎧を行う' ）;
 。8  
。9      ctx.textAlign = 'センター' ;
 10      ctx.textBaseline = '中東' ;
 。11      ctx.strokeText（ '水を飲む人々 '、150、150 ）;
 12は、 
13であります     = ctx.textAlign '末端' ;
 14      ctx.textBaseline = '底' ;
 15      ctx.fillText（ 'Lengnuanzizhi'、150、250 ）;
 16  
。17      ctx.beginPath（）;
 18である      ctx.fillStyle = '赤' 。
 19      ctx.fillRect（150、50 ,. 5 ,. 5 ）; //最初の文のマーカー（x、y）は、四角形の座標
 20      ctx.fillRect（150,150 ,. 5 ,. 5 ）; //タグの第二文矩形の座標（x、y）
 21である      ctx.fillRect（150,250 ,. 5 ,. 5 ）; //タグの3番目の文の矩形（x、y）は座標
 22を }

コードを実行した結果によると、我々は見つけることができます：

textAlignが開始するプロパティは、は、TextBaselineの先頭に設定すると、座標（x、y）は、テキストの座標実際垂直および水平開始頂点です。

中心にプロパティtextAlignは、は、TextBaselineの中央に設定すると、座標（x、y）は、テキストが実際に水平および中点の垂直中間点での座標。

ときに最後までプロパティtextAlign、底部には、TextBaseline、座標（x、y）は、実際にエンドのテキストの水平および垂直座標の終わりです。

したがって、textAlignは、TextBaseline属性値およびテキストの属性値を水平方向および垂直方向におけるこの時点での位置座標（x、y）に対するテキストことを示しています。

[キャンバス]基礎研究ノート（B）

おすすめ