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 | 用於建立圖案描邊的圖案物件 |
更多示例
示例
用漸變 stokeStyle 繪製一個矩形
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 參考