CanvasRenderingContext2D:stroke() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Canvas 2D API 的 CanvasRenderingContext2D.stroke() 方法用于根据当前的描边样式,绘制当前或指定的路径。

描边与路径的中心对齐,也就是说,描边的一半位于路径的内侧,另一半位于外侧。

描边使用非零环绕规则进行绘制,这意味着路径交叉点仍会被填充。

语法

js
stroke()
stroke(path)

参数

path

要描边的 Path2D 路径。

返回值

无(undefined)。

示例

简单的矩形轮廓线

此示例使用 rect() 方法创建一个矩形,然后使用 stroke() 方法将其绘制到画布上。

HTML

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

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 10, 150, 100);
ctx.stroke();

结果

重新对路径进行描边

通常情况下,每当你想要描边新的内容时,应调用 beginPath() 方法。如果不这样做,之前的子路径将保留在当前路径中,并且每次调用 stroke() 方法时都会被描边。然而,在某些情况下,这可能是期望的效果。

HTML

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

JavaScript

以下代码分别对第一个子路径描边三次,第二个子路径描边两次,第三个子路径描边一次。

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

// 第一个子路径
ctx.lineWidth = 26;
ctx.strokeStyle = "orange";
ctx.moveTo(20, 20);
ctx.lineTo(160, 20);
ctx.stroke();

// 第二个子路径
ctx.lineWidth = 14;
ctx.strokeStyle = "green";
ctx.moveTo(20, 80);
ctx.lineTo(220, 80);
ctx.stroke();

// 第三个子路径
ctx.lineWidth = 4;
ctx.strokeStyle = "pink";
ctx.moveTo(20, 140);
ctx.lineTo(280, 140);
ctx.stroke();

结果

描边和填充

如果你想要同时描边和填充一个路径,执行这些操作的顺序将决定最终的结果。在这个示例中,左侧的正方形先填充后描边,右侧的正方形先描边后填充。

HTML

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

JavaScript

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

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

// 先填充后描边
ctx.beginPath();
ctx.rect(25, 25, 100, 100);
ctx.fill();
ctx.stroke();

// 先描边后填充
ctx.beginPath();
ctx.rect(175, 25, 100, 100);
ctx.stroke();
ctx.fill();

结果

规范

Specification
HTML
# dom-context-2d-stroke-dev

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
stroke
path parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见