CanvasRenderingContext2D: strokeRect() 方法

基线 广泛可用

此功能已发展成熟，可在多种设备和浏览器版本上使用。它自 2015 年 7 月.

报告反馈

CanvasRenderingContext2D.strokeRect() 方法是 Canvas 2D API 的一部分，它根据当前的 strokeStyle 及其他上下文设置绘制一个描边的（带轮廓的）矩形。

语法

此方法直接在画布上绘制，不会修改当前路径，因此任何随后的 fill() 或 stroke() 调用都不会对它产生影响。
strokeRect(x, y, width, height)

js

strokeRect() 方法绘制一个描边的矩形，其起点位于 (x, y)，大小由 width 和 height 指定。

参数

x

矩形起点的 x 轴坐标。

y

矩形起点的 y 轴坐标。

width

矩形的宽度。正值表示向右，负值表示向左。

height

矩形的高度。正值表示向下，负值表示向上。

返回值

示例

无 (undefined).

一个简单的描边矩形

HTML

此示例使用 strokeRect() 方法绘制一个带绿色轮廓的矩形。
<canvas id="canvas"></canvas>

JavaScript

html

此方法直接在画布上绘制，不会修改当前路径，因此任何随后的 fill() 或 stroke() 调用都不会对它产生影响。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "green";
ctx.strokeRect(20, 10, 160, 100);

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

结果

应用各种上下文设置

HTML

此示例使用 strokeRect() 方法绘制一个带绿色轮廓的矩形。
<canvas id="canvas"></canvas>

JavaScript

此方法直接在画布上绘制，不会修改当前路径，因此任何随后的 fill() 或 stroke() 调用都不会对它产生影响。
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);

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

规范

此示例绘制一个带阴影和粗斜边轮廓的矩形。
规范
# HTML 标准

浏览器兼容性

dom-context-2d-strokerect-dev

另请参见