CanvasRenderingContext2D: lineJoin 屬性
Canvas 2D API 的 CanvasRenderingContext2D.lineJoin 屬性決定了在連線兩個線段相遇處的形狀。
當兩個連線的線段方向相同時，此屬性沒有效果，因為在這種情況下不會新增連線區域。長度為零的退化線段（即所有端點和控制點位於完全相同的位置）也會被忽略。
注意： 可以使用 stroke()、strokeRect() 和 strokeText() 方法繪製線條。
值
此屬性有三種可能的值：“round”、“bevel”和“miter”。預設為“miter”。
“round”-
透過填充以連線線段公共端點為中心的附加圓盤扇形來圓化形狀的角。這些圓角的半徑等於線的寬度。
“bevel”-
在連線線段的公共端點與每條線段各自的外部矩形角之間填充一個附加的三角形區域。
“miter”-
連線的線段透過延長它們的外部邊緣以在單個點連線，從而產生填充附加菱形區域的效果。此設定受
miterLimit屬性的影響。預設值。
示例
更改路徑中的連線方式
此示例將圓形的線連線方式應用於一個路徑。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 20;
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(190, 100);
ctx.lineTo(280, 20);
ctx.lineTo(280, 150);
ctx.stroke();
結果
線連線方式的比較
下面的示例繪製了三個不同的路徑，演示了三種 lineJoin 選項。
js
const ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 10;
["round", "bevel", "miter"].forEach((join, i) => {
ctx.lineJoin = join;
ctx.beginPath();
ctx.moveTo(-5, 5 + i * 40);
ctx.lineTo(35, 45 + i * 40);
ctx.lineTo(75, 5 + i * 40);
ctx.lineTo(115, 45 + i * 40);
ctx.lineTo(155, 5 + i * 40);
ctx.stroke();
});
規範
| 規範 |
|---|
| HTML # dom-context-2d-linejoin-dev |
瀏覽器相容性
載入中…
WebKit/Blink 特定說明
- 在基於 WebKit 和 Blink 的瀏覽器中，除了此屬性外，還實現了非標準的、已棄用的
ctx.setLineJoin()方法。