CanvasRenderingContext2D:strokeRect() 方法

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.strokeRect() 方法根据当前的 strokeStyle 和其它设置描绘一个矩形的描边(轮廓)。

此方法直接绘制到画布而不修改当前路径,因此任何后续 fill()stroke() 调用对它没有影响。

语法

js
strokeRect(x, y, width, height)

strokeRect() 方法绘制一个描边矩形,其起点为 (x, y),其大小由 widthheight 指定。

参数

x

矩形起点的 x 轴坐标。

y

矩形起点的 y 轴坐标。

width

矩形的宽度。正值在右侧,负值在左侧。

height

矩形的高度。正值在下,负值在上。

返回值

无(undefined)。

示例

简单的描边矩形

此示例使用 strokeRect() 方法绘制了一个带有绿色轮廓的矩形。

HTML

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

JavaScript

矩形的左上角是(20,10)。它的宽度为 160,高度为 100。

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "green";
ctx.strokeRect(20, 10, 160, 100);

结果

应用多种上下文设置

此示例绘制一个带有阴影和粗斜面轮廓的矩形。

HTML

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

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.shadowColor = "#d53";
ctx.shadowBlur = 20;
ctx.lineJoin = "bevel";
ctx.lineWidth = 15;
ctx.strokeStyle = "#38f";
ctx.strokeRect(30, 30, 160, 90);

结果

规范

Specification
HTML
# dom-context-2d-strokerect-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
strokeRect

Legend

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

Full support
Full support

参见