HTML canvas strokeStyle 属性

实例

画一个矩形。使用红色的笔触颜色：

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#FF0000";
ctx.strokeRect(20, 20, 150, 100);

亲自试一试 »

浏览器支持

表中的数字表示支持该属性的第一个浏览器版本。

属性
strokeStyle	4.0	9.0	3.6	4.0	10.1

定义和用法

strokeStyle 属性设置或返回用于描边的颜色、渐变或图案。

默认值:	#000000
JavaScript 语法:	context.strokeStyle = color\|gradient\|pattern;

属性值

值	描述	Play it
color	一个 CSS 颜色值，指示绘图的笔触颜色。默认值为#000000	Play it »
gradient	用于创建渐变笔触的渐变对象（线性或径向）
pattern	用于创建图案笔划的图案对象

更多实例

实例

画一个矩形。使用渐变笔划：

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var gradient = ctx.createLinearGradient(0, 0, 170, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");

// Fill with gradient
ctx.strokeStyle = gradient;
ctx.lineWidth = 5;
ctx.strokeRect(20, 20, 150, 100);

亲自试一试 »

实例

用渐变笔划写下文本 "Big smile!":

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.strokeStyle = gradient;
ctx.strokeText("Big smile!", 10, 50);

亲自试一试 »

❮ Canvas 对象