HTML5 キャンバス - パスを使用して線を描画する例_html5 チュートリアル スキル

原文:
http://www.lifelaf.com/blog/?p=371
この記事は、Steve Fulton & Jeff Fulton HTML5 Canvas、第 2 章「Using Paths」から翻訳したものです。

HTML5 Canvas では、「パス」を使用して任意のグラフィックを描画できます。パスは単に一連の点と、これらの点を接続する線です。 Canvas コンテキストには「現在のパス」が 1 つだけあり、context.save() が呼び出された場合、「現在のパス」は保存されません。

パスの始まりと終わり

beginPath() を呼び出してパスを開始し、closePath() を呼び出すとパスが終了します。パス内のポイントを接続すると、その接続は「サブパス」を形成します。 「サブパス」の最後の点がその最初の点に接続されている場合、「サブパス」は「閉じている」と見なされます。

線の描画

最も基本的なパス操作は、moveTo() コマンドと lineTo() コマンドを繰り返し呼び出すことで構成されます。たとえば、次の例:

コードをコピーします

コードは次のとおりです:

関数drawScreen() {
context.ストロークスタイル = "黒";
context.lineCap = 'square';
context.beginPath(); context.moveTo(20, 0);
context.lineTo(100, 0);
context.closePath(); 🎜> 上の例では、幅 10 ピクセルの水平線分を描画し、同時に lineCap プロパティとストロークスタイルプロパティも設定します。以下は、一般的に使用される属性のリストです。

lineCap
lineCap は、Canvas 内の線分の両端のスタイルを定義し、次の 3 つの値のいずれかに設定できます。

お尻。デフォルト。線分の両端に直線エッジを追加します。

丸い。ワイヤ セグメントの両端に半円形のワイヤ キャップを追加します。ワイヤ キャップの直径はワイヤ セグメントの幅と同じです。
正方形。ワイヤセグメントの両端に角ワイヤキャップを追加します。ワイヤキャップの辺の長さは線分の幅と同じです。
lineJoin
lineJoin は、2 つの線分の交点のコーナー スタイルを定義します。以下は 3 つのオプションの値です:

miter。デフォルトでは鋭い角が作成されます。 miterLimit 属性を設定することで尖頭の長さを制限できます。miterLimit は線幅に対する尖頭長の比率の最大値で、デフォルトは 10 です。
面取り。ベベルを作成します。
丸い。丸い角を作成します。
lineWidth
lineWidth は線の太さを定義します。デフォルトは 1.0 です。

ストロークスタイル
ストロークスタイルは、線のレンダリングに使用される色とその他のスタイルを定義します。


翻訳注:
lineJoin が miter に設定されているが、鋭角の長さが miterLimit の制限を超えている場合、Canvas は「ベベル」コーナー効果を表示します。