CanvasRenderingContext2D：stroke() 方法

基线 广泛可用

此功能已经建立并且可在许多设备和浏览器版本中使用。它自 2015 年 7 月.

报告反馈

Canvas 2D API 的 CanvasRenderingContext2D.stroke() 方法使用当前描边样式描边（轮廓）当前或给定路径。

描边与路径的中心对齐；换句话说，描边的一半绘制在内侧，一半绘制在外侧。

语法

描边使用 非零缠绕规则 绘制，这意味着路径交叉点仍将被填充。
stroke()
stroke(path)

js

参数

path

要描边的 Path2D 路径。

返回值

示例

无 (undefined).

一个简单的描边矩形

HTML

此示例使用 rect() 方法创建一个矩形，然后使用 stroke() 将其绘制到画布上。
<canvas id="canvas"></canvas>

JavaScript

描边使用 非零缠绕规则 绘制，这意味着路径交叉点仍将被填充。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 10, 150, 100);
ctx.stroke();

html

结果

重新描边路径

HTML

此示例使用 rect() 方法创建一个矩形，然后使用 stroke() 将其绘制到画布上。
<canvas id="canvas"></canvas>

JavaScript

通常，您需要为要描边的每个新对象调用 beginPath()。如果您没有这样做，之前的子路径将保留为当前路径的一部分，并且每次调用 stroke() 方法时都会被描边。但是，在某些情况下，这可能是预期效果。

描边使用 非零缠绕规则 绘制，这意味着路径交叉点仍将被填充。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// First sub-path
ctx.lineWidth = 26;
ctx.strokeStyle = "orange";
ctx.moveTo(20, 20);
ctx.lineTo(160, 20);
ctx.stroke();

// Second sub-path
ctx.lineWidth = 14;
ctx.strokeStyle = "green";
ctx.moveTo(20, 80);
ctx.lineTo(220, 80);
ctx.stroke();

// Third sub-path
ctx.lineWidth = 4;
ctx.strokeStyle = "pink";
ctx.moveTo(20, 140);
ctx.lineTo(280, 140);
ctx.stroke();

html

此代码对第一条路径描边三次，对第二条路径描边两次，对第三条路径只描边一次。

描边和填充

HTML

此示例使用 rect() 方法创建一个矩形，然后使用 stroke() 将其绘制到画布上。
<canvas id="canvas"></canvas>

JavaScript

描边使用 非零缠绕规则 绘制，这意味着路径交叉点仍将被填充。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.lineWidth = 16;
ctx.strokeStyle = "red";

// Stroke on top of fill
ctx.beginPath();
ctx.rect(25, 25, 100, 100);
ctx.fill();
ctx.stroke();

// Fill on top of stroke
ctx.beginPath();
ctx.rect(175, 25, 100, 100);
ctx.stroke();
ctx.fill();

html

规范

如果您想要描边和填充路径，则执行这些操作的顺序将决定结果。在此示例中，左侧的正方形使用描边在填充的顶部绘制。右侧的正方形使用填充在描边的顶部绘制。
规范
# HTML 标准

浏览器兼容性

dom-context-2d-stroke-dev

另请参阅