キャンバス学習のまとめ 3: パスの描画 - 線分

Canvas 描画環境の描画メソッドには、即時描画メソッドとパスベースの描画メソッドがあります。

グラフィックを即座に描画するためのメソッドは 2 つだけです: ストロークRect() と fillRect() メソッドもすぐに描画されますが、テキストはグラフィックとは見なされません。

SVG (Scalable Verctor Graphics、スケーラブル ベクター グラフィックス)、Adobe Illustrator などのほとんどの描画システムはパスに基づいています。

これらの描画システムを使用する場合は、最初にパスを定義してから、それをストロークまたは塗りつぶす必要があります。または、形状を表示できるようにストロークと塗りつぶしを行うこともできます。

Canvas での 3 つの描画方法:

Canvas 描画環境では、直線パスと呼ばれるパスに基づいて線分も描画されます。直線パスを作成するメソッドは、moveTO() と lineTo() です。パスを作成した後に、ストローク() メソッドを呼び出すだけです。セグメントは Canvas に描画されます。

これは、前述したパスベースの描画方法であり、ストロークまたは塗りつぶしを行う必要があります。

通常、2 つの点は線で結ばれているため、moveTO() で線分の始点を指定し、lineTo() で別の点に移動するのは非常に簡単です。

関数drawLine(){cxt.moveTo(50, 50);}

ただし、パスベースの描画方法ではストロークまたは塗りつぶしを行う必要があると前述しました。したがって、結果を確認するには、ストローク() メソッドも使用する必要があります。

そこで、線分が描画されるようにメソッドを次のように変更します。

関数drawLine(){ cxt.moveTo(50, 50); cxt.lineTo(200, 200);}

lineTo() のみを使用してキャンバスに線分を描画することもできます。上記のコードを次のように変更しても、効果は同じです。

関数drawLine(){ cxt.lineTo(50, 50); cxt.lineTo(200, 200);}

moveTo() と lineTo() の使用法をまとめます。

• moveTo(x,y): ストロークを指定された座標 x および y に移動し、現在のパスにサブパスを追加します。このメソッドは、現在のパス内のサブパスをクリアしません。
• lineTo(x,y): 現在の位置から指定された x および y の位置まで直線を描きます。現在のパスにサブパスがない場合、このメソッドは moveTo() と同じように動作します。現在のパスにサブパスがある場合、このメソッドは指定したポイントをサブパスに追加します。

線分の幅を変更する

関数 = 14; cxt.lineTo(50, 50);

関数drawLine(){ cxt.lineWidth = 14; cxt.lineTo(50, 50); cxt.ストローク();}

CanvasGradient オブジェクトまたは CanvasPattern オブジェクトを使用して、線分にグラデーションの色やパターンを追加することもできます。

関数drawLine(){ cxt.lineWidth = 14; var gradient = cxt.createLinearGradient(0, 0, Canvas.width/2, gradient.addColorStop(0, 'blue'); 0.5, '紫'); gradient.addColorStop(1, '黄色');グラデーション; cxt.lineTo(50, 50);

上のキャンバスの 3 つの描画方法から、2 行目の円弧パスは開いたパス、最後の行の円弧パスは閉じたパスであることがわかります。では、クローズドパスはどのようにして実現されるのでしょうか?

キャンバスにパスを描画する最も重要な 2 つの方法を見てみましょう。

• beginPath(): 現在のサブパスをすべてクリアして、現在のパスをリセットし、パスを再計画します。
• closePath(): 開いているパスを閉じるために使用されます。グラフがすでに閉じている場合、つまり現在の点が開始点である場合、この関数は何も行いません。

まずポリラインを描きます

関数drawLine(){ cxt.ストロークスタイル = 'グリーン'; cxt.moveTo(50, 150); );}

上記の例のコードを変更し、beginPath() メソッドと closePath() メソッドをコードに追加します。

 functiondrawLine(){ //ストローク三角形 cxt.drawingStyle = 'green' cxt.beginPath(); cxt.lineTo(50, 150); (); cxt.beginPath(); cxt.lineTo(150, 250); cxt.closePath();}

キャンバスに 2 つのパスを描画したことがわかります。

注: beginPath() を呼び出した後、またはキャンバスが最初に作成されたとき、最初のパス構築コマンドは通常 moveTo() とみなされます。したがって、グラフィックを描画するときは最初に beginPath() を使用する必要があります。

コードの修正を続けましょう

 functiondrawLine(){ // 三角形のストローク cxt.drawingStyle = 'green' cxt.beginPath(); cxt.lineTo(50, 150); (150, 150); // ポリライン cxt.translate(150, 0); cxt.drawingStyle = 'red' cxt.beginPath(50, 150); cxt.lineTo(150, 150); cxt.closePath(); //緑色で塗りつぶされた三角形 cxt.fillStyle = 'green' cxt.beginPath(50, 50); .lineTo(50, 150); cxt.fill(); cxt.closePath(); // 赤色で塗りつぶされた三角形 cxt.fillStyle = 'red' cxt.beginPath(); 50, 50); cxt.lineTo(50, 150); 150); cxt.closePath();}

上記の例から、closePath() のさまざまな位置もグラフィックスに影響を与えることがわかります。

注: fill() 関数を呼び出すと、閉じられていないすべての図形が自動的に閉じられるため、現時点では closePath() 関数は必要ありません。

ただし、ストローク() の呼び出し: ストローク() メソッドの前に closePath() のみを使用すると、ストローク() メソッドの後に closePath() メソッドを呼び出すと、閉じたパスが形成されます。描画パスが閉じられているため、closePath() メソッドは機能しません。

まずは例を見てみましょう

 functiondrawLine(){ // 三角形の描画 cxt.beginPath(); cxt.lineTo(450, 50); ; cxt.moveTo(50.5, 150.5); cxt.lineTo(450.5, 150.5);

図から、両方の線分の lineWidth を 1 ピクセルに設定していることがわかりますが、上の線分は 2 ピクセルを描画します。

特定の 2 ピクセルの境界に 1 ピクセル幅の線分を描画すると、その線分は実際には 2 ピクセル幅を占めます。

ピクセル境界に幅 1 ピクセルの垂直線セグメントを描画すると、キャンバス描画環境オブジェクトは境界の中心線の右側に半分のピクセルを描画し、境界の左側に残りの半分のピクセルを描画しようとするためです。中心線。

ただし、ピクセル全体の中に幅の半分のピクセルの線分を描画することはできないため、両方向の半分のピクセルが 1 ピクセルに拡張されます。

一方、描画は2ピクセル間なので、中心線の左右端の半ピクセルは伸びず、合わせてちょうど1ピクセルの幅になります。したがって、本当に 1 ピクセル幅の線分を描画したい場合は、2 つのピクセル間に線分を描画する必要があります。

真の 1 ピクセルの線分を描画する方法を理解したので、グリッドの描画を開始しましょう

 functiondrawLine(stepx, stepy){ cxt.lineWidth = 0.5; cxt.drawingStyle = 'green'; //垂直線を描画 for(var i= stepx + 0.5; i< cxt.canvas.width; i+= stepx){ cxt.beginPath(); cxt.moveTo(i, 0); cxt.canvas.height); cxt.steroid(); } //水平線を描画します for(var i= stepy + 0.5; i< cxt.canvas.height; i+= stepy){ cxt.beginPath(); moveTo (0, i); cxt.lineTo(cxt.canvas.width, i); }}drawLine(10, 10);

上の例では、2 つのピクセル間のピクセルに線分を描画しますが、描画された線分の幅はわずか 0.5 ピクセルです。

Canvas 仕様では明示的に規定されていませんが、すべてのブラウザ Canvas 実装では、アンチエイリアス技術を使用してサブピクセルの線分描画効果を作成します。

ここでは主に、moveTo()で始点を定義し、lineTo()で終点を定義し、stroke()で現在のパスを描画する方法を中心に、canvas上に直線パスを描画する方法を説明します。これら 3 つの方法で線分を描画します

Canvas にパスを描画するための 2 つの重要なメソッド、beginPath() と closePath() があります。グラフィックスを描画する前に beginPath() を呼び出すことは、複数のグラフィックスを描画するために必要な手順です。

fill()を使用する場合はclosePath()を省略できますが、closePath()メソッドの呼び出し位置にも注意が必要です。

線分を描画するとき、lineWidth を使用して線分の幅を変更し、ストロークスタイルを使用して線分の色を変更できます。

線分のピクセル境界を把握して、実際の 1 ピクセルの線幅を描画できるようにします。

キャンバスにグラフィックを描くことに興味のある学生は、今後の更新にも注意してください。何か問題がある場合は、指摘してコミュニケーションを深めてください。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。