CanvasRenderingContext2D.strokeStyle

CanvasRenderingContext2D.strokeStyle 是 Canvas 2D API 描述画笔(绘制图形)颜色或者样式的属性。默认值是 #000 (black)。

参见 Canvas Tutorial 中的 Applying styles and color 章节。

语法

ctx.strokeStyle = color;
ctx.strokeStyle = gradient;
ctx.strokeStyle = pattern;

选项

color
DOMString 字符串,可以转换成 CSS <color> 值。
gradient
CanvasGradient 对象(线性渐变或放射性渐变)。
pattern
CanvasPattern 对象(可重复的图片)。

示例

使用 strokeStyle 属性设置不同的颜色

这是一段简单的代码片段,使用 strokeStyle 属性设置不同的颜色。

HTML

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

JavaScript

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

ctx.strokeStyle = "blue";
ctx.strokeRect(10, 10, 100, 100);

修改下面的代码并在线查看 canvas 的变化:

strokeStyle 例子

这个例子使用 strokeStyle 属性改变图形轮廓线的颜色。我们使用 arc() 绘制圆形来代替正方形。

var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
  for (var j=0;j<6;j++){
    ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
                      Math.floor(255-42.5*j) + ')';
    ctx.beginPath();
    ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
    ctx.stroke();
  }
}

结果如下显示:

ScreenshotLive sample

规范描述

Specification Status Comment
HTML Living Standard
CanvasRenderingContext2D.strokeStyle
Living Standard

浏览器兼容性

BCD tables only load in the browser

  • 在基于 WebKit- 和 Blink- 的浏览器中,除了此属性外,还实现了一个不标准的并且不赞成使用的方法  ctx.setStrokeColor()
    setStrokeColor(color, optional alpha);
    setStrokeColor(grayLevel, optional alpha);
    setStrokeColor(r, g, b, a);
    setStrokeColor(c, m, y, k, a);
    

参见