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)，其大小由 width 和 height 指定。

参数

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 Standard
# dom-context-2d-strokerect-dev

浏览器兼容性

BCD tables only load in the browser

参见