CanvasRenderingContext2D: lineWidth 屬性

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

Canvas 2D API 的 CanvasRenderingContext2D.lineWidth 屬性用於設定線條的粗細。

注意： 可以使用 stroke()、strokeRect() 和 strokeText() 方法繪製線條。

值

一個指定線寬的數值，單位為座標空間單位。零、負值、Infinity 和 NaN 值將被忽略。此值預設為 1.0。

示例

更改線寬

此示例繪製了一條線和一個矩形，線寬為 15 個單位。

HTML

html

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.lineWidth = 15;

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(130, 130);
ctx.rect(40, 40, 70, 70);
ctx.stroke();

結果

規範

規範
HTML # dom-context-2d-linewidth-dev

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025 年 9 月 25 日，由 MDN 貢獻者進行編輯。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤