キャンバス上の線分の端点と接続点の詳細説明

Canvas では、線分もパスの一種であり、線形パスと呼ばれます。 Canvas で線形パスを描画するには、主に moveTo(x,y)、lineTo(x,y)、stlooke() メソッドを使用します 線幅の使用法を思い出してください。

function drawLine(){
    cxt.lineWidth = 3;
    cxt.moveTo(10, 10);
    cxt.lineTo(120, 100);
    cxt.stroke();
}

上記のコードで、幅3ピクセルの線分を描くことができます。

前の章では、線幅とピクセル境界についても説明しました:
特定の 2 ピクセルの境界に 1 ピクセル幅の線分を描画すると、その線分は実際には 2 ピクセルを占有します。ピクセルの幅;

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

ただし、ピクセル全体の中に半ピクセル幅の線分を描くことはできないので、両方向の半ピクセルを1ピクセルに拡張します。 (具体的な内容については、第 3 章を参照してください);

今日の章では、これを使用して、線分の他のプロパティである lineCap と lineJoin を見ていきます。

線分の終点 (lineCap)

線分を描画するときに、キャンバス描画環境での「線のキャップ」(lineCap) がどのように表示されるかを制御できます。オブジェクトの場合、このプロパティは lineCap とも呼ばれます。
線分の端点のスタイルには、butt、roundm、square の 3 つの値があります。デフォルトは、round と square の両方で、線分の端点にハットを描画します。

• butt: 線分の端点のデフォルトのスタイル

• round: 線幅の半分の半径を持つ半円を端点に追加します。

• 正方形: 端点に長方形を追加します。長さは線幅と一致し、幅は線幅の半分です。

これを見ると、何も面白いものは見えないようです。それなら、まず描いてみましょう、すぐに分かります。それ以外の場合は、誰もがデータの視覚化について話します。

function lineCap(){
    cxt.lineWidth = 20;
    cxt.strokeStyle = '#16a085';

    cxt.beginPath();
    cxt.lineCap = 'butt';
    cxt.moveTo(20, 20);
    cxt.lineTo(300, 20);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineCap = 'round';
    cxt.moveTo(20, 100);
    cxt.lineTo(300, 100);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineCap = 'square';
    cxt.moveTo(20, 180);
    cxt.lineTo(300, 180);
    cxt.stroke();
}

上の図を見ると、lineCap の属性値のスタイルがすぐにわかり、視覚化の魅力も感じられます。

線分の接続点(lineJoin)

線分や長方形を描く際、2つの線分の接続点である変曲点を制御することができます。線分。
キャンバス描画環境では、線分の接続点はlineJoin属性で制御されます。
lineJoin 属性には、round、bevel、miter の 3 つの値もあります。デフォルトは miter です。

• round: 追加の円弧を塗りつぶします。

• bevel: 追加の三角形を塗りつぶします。は 2 つです。線分の角の外縁の点が直線で結ばれます。

• マイター: 2 つの線分の角の外縁の延長線の交差によって形成される追加の多角形を塗りつぶします。

描いて見てみましょう

rreee

線分接続点の具体的な作図方法を見てみましょう

Tips

マイタースタイルを使用して接続を描画する場合線分の点を指定するには、 miterLimit 属性を指定することもできます
miterLimit: 線幅の半分に対する留め継ぎ線の長さの比率を表します

留め継ぎ線の測定方法は次のとおりです

この図から、2つの線分の角度が非常に小さい場合、対角線の長さが非常に長くなり、線幅の半分に対する比率が設定した値を超えることがわかります。 miterLimitの属性値

を指定すると、ブラウザは線分の接続点をベベル状に描画します。

概要

キャンバス描画環境における線分の関連プロパティ

プロパティ	説明	の価値があります	デフォルト
lineWidth	ピクセル単位の線分の幅	ゼロ以外の正の数	1
ラインキャップ	線分の端点を描く	butt、round、square	butt
lineJoin	線分の接続点のスタイル	bevel、round、miター	miter
miterLimit	線幅の半分に対する留め継ぎ線の比率	ゼロ以外の正の数	10

以上がキャンバス上の線分の端点と接続点の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。