コメント:「パス」を使用して、グラフィックを描画できます。パスは、単に一連のポイントであり、これらのポイントを接続する線です。任意のキャンバスコンテキストには1つの「現在のパス」のみがあり、Context.save()が呼び出されると、「現在のパス」は保存されません
オリジナル:?p = 371
この記事は、Steve Fulton&Jeff Fulton HTML5 Canvas、第2章から翻訳され、パスを使用して行を作成します
HTML5キャンバスの場合、パスを使用して任意のグラフを描画できます。パスは、単に一連のポイントであり、これらのポイントを接続する線です。 Canvasコンテキストには1つの現在のパスのみがあり、Context.save()が呼び出されると、現在のパスは保存されません。
パスの始まりと終わり
beginpath()を呼び出すことはパスを開始できますが、Closepath()を呼び出すとパスが終了します。パスのポイントを接続すると、この接続はサブパスを形成します。サブパスの最後のポイントが最初のポイントに接続されている場合、サブパスが閉じられていると考えます。
線画
最も基本的なパス操作は、moveto()およびlineto()コマンドへの繰り返しの呼び出しで構成されています。たとえば、次の例:
関数drawScreen(){
context.strokestyle = "black";
Context.LineWidth = 10;
context.linecap = 'square';
context.beginpath();
Context.Moveto(20、0);
Context.lineto(100、0);
context.stroke();
Context.ClosePath();
}
上記の例では、幅が10ピクセルの水平線セグメントを示します。同時に、LineCapとStrokestyleの特性も設定します。一般的に使用されるプロパティのリストは次のとおりです。
linecap
LineCapは、キャンバスのラインセグメントの両端でスタイルを定義し、次の3つの値のいずれかに設定できます。
お尻。デフォルト値。ラインセグメントの両端にまっすぐなエッジを追加します。
ラウンド。ラインセグメントの両端に半円形のラインキャップを追加します。ラインキャップの直径は、ラインセグメントの幅に等しくなります。
四角。ラインセグメントの両端に四角い線キャップを追加します。ラインキャップの長さは、ラインセグメントの幅に等しくなります。
linejoin
LineJoinは、2つのラインセグメントの交差点でコーナーパターンを定義します。以下は、3つのオプションの値です。
マイター。デフォルト;鋭いコーナーを作成します。マイテルリミットプロパティを設定することにより、シャープアングルの長さを制限できます。mitterlimitは、シャープ角度とライン幅の最大比であり、デフォルトは10です。
ベベル。ベベルを作成します。
ラウンド。丸い角を作成します。
線幅
LineWidthはラインの厚さを定義し、デフォルトは1.0です。
strokestyle
Strokestyleは、ラインをレンダリングするために使用される色などのスタイルを定義します。
翻訳者のメモ:LineJoinがMiterに設定されているが、鋭い角の長さがMiterLimitの限界を超えると、CanvasはBevel Corner Effectを表示します。