CanvasRenderingContext2D: strokeStyle 属性

基线 广泛可用

此功能已经成熟，并在许多设备和浏览器版本中正常工作。它自 2015 年 7 月.

报告反馈

Canvas 2D API 的 CanvasRenderingContext2D.strokeStyle 属性指定用于形状周围笔触（轮廓）的颜色、渐变或图案。默认值为 #000（黑色）。

值

注意：有关笔触和填充样式的更多示例，请参见 应用样式和颜色，位于 Canvas 教程中。

以下选项之一

颜色

解析为 CSS <color> 值的字符串。

渐变

一个 CanvasGradient 对象（线性或径向渐变）。

图案

示例

一个 CanvasPattern 对象（重复的图像）。

更改形状的笔触颜色

HTML

此示例将蓝色笔触颜色应用于矩形。
<canvas id="canvas"></canvas>

JavaScript

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

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

js

结果

使用循环创建多个笔触颜色

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

for (let i = 0; i < 6; i++) {
  for (let 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();
  }
}

在此示例中，我们使用两个 for 循环和 arc() 方法来绘制一个圆形网格，每个圆形具有不同的笔触颜色。为此，我们使用两个变量 i 和 j 为每个圆形生成唯一的 RGB 颜色，并且仅修改绿色和蓝色值。（红色通道具有固定值。）

规范

结果如下所示
规范
# HTML 标准

浏览器兼容性

dom-context-2d-strokestyle-dev

在基于 WebKit 和 Blink 的浏览器中，除了此属性之外，还实现了非标准且已弃用的方法 ctx.setStrokeColor()。

html
setStrokeColor(color);
setStrokeColor(color, alpha);
setStrokeColor(grayLevel);
setStrokeColor(grayLevel, alpha);
setStrokeColor(r, g, b, a);
setStrokeColor(c, m, y, k, a);

另请参阅