Canvas strokeStyle 屬性
示例
用 strokeStyle = "red" 繪製一個矩形
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "red";
ctx.strokeRect(20, 20, 150, 100);
自己動手試一試 »
更多示例見下文。
描述
strokeStyle 屬性用於設定或返回用於描邊的顏色、漸變或圖案。
預設值為 #000000（純黑色）。
另請參閱
fillStyle 屬性 (設定填充顏色/樣式)
lineWidth 屬性（設定線寬）
beginPath() 方法 (開始一個新路徑)
moveTo() 方法 （將路徑移動到指定點）
lineTo() 方法 （向路徑新增一條線）
stroke() 方法 (繪製當前路徑)
strokeRect() 方法 (繪製一個矩形)
語法
| context.strokeStyle = color|gradient|pattern |
屬性值
| 值 | 描述 | 試一試 |
|---|---|---|
| color | 一個 CSS 顏色值，表示繪圖的描邊顏色。預設值為 #000000 | 試一試 » |
| 漸變 | 用於建立漸變描邊的漸變物件（線性或 徑向） | |
| pattern | 用於建立圖案描邊的圖案物件 |
更多示例
示例
用漸變 strokeStyle 繪製一個矩形
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 建立漸變
const gradient = ctx.createLinearGradient(0, 0, 170, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// 用漸變填充
ctx.strokeStyle = gradient;
ctx.lineWidth = 5;
ctx.strokeRect(20, 20, 150, 100);
自己動手試一試 »
示例
用漸變 strokeStyle 寫出文字 "Big smile!"
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Verdana";
// 建立漸變
const gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// 用漸變填充
ctx.strokeStyle = gradient;
ctx.strokeText("Big smile!", 10, 50);
自己動手試一試 »
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
stokestyle 在所有現代瀏覽器中都受支援
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 參考
