CanvasRenderingContext2D: lineCap 屬性
Canvas 2D API 的 CanvasRenderingContext2D.lineCap 屬性決定了繪製線條端點的形狀。
注意： 可以使用 stroke()、strokeRect() 和 strokeText() 方法繪製線條。
值
以下之一：
示例
更改線帽的形狀
此示例將直線端點的形狀設定為圓形。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();
結果
線帽比較
在此示例中，繪製了三條線，每條線都使用了不同的 lineCap 屬性值。添加了兩條輔助線，以清晰顯示三者之間的確切差異。每條線都精確地開始和結束於這些輔助線上。
最左邊的線使用了預設的 "butt" 選項。它完全與輔助線齊平。第二條線設定為使用 "round" 選項。這會在端點處新增一個半圓，其半徑等於線寬的一半。最右邊的線使用了 "square" 選項。這會新增一個寬度等於線粗細、高度為其一半的方框。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Draw guides
ctx.strokeStyle = "#0099ff";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();
// Draw lines
ctx.strokeStyle = "black";
["butt", "round", "square"].forEach((lineCap, i) => {
ctx.lineWidth = 15;
ctx.lineCap = lineCap;
ctx.beginPath();
ctx.moveTo(25 + i * 50, 10);
ctx.lineTo(25 + i * 50, 140);
ctx.stroke();
});
規範
| 規範 |
|---|
| HTML # dom-context-2d-linecap-dev |
瀏覽器相容性
載入中…
WebKit/Blink 特定說明
- 在基於 WebKit 和 Blink 的瀏覽器中，除了此屬性外，還實現了一個非標準的、已棄用的方法
ctx.setLineCap()。