CanvasRenderingContext2D.strokeRect() - Web API 接口参考 编辑

CanvasRenderingContext2D.strokeRect() 是 Canvas 2D API 在 canvas 中，使用当前的绘画样式，描绘一个起点在 (x, y) 、宽度为 w 、高度为 h 的矩形的方法。

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

语法

void ctx.strokeRect(x, y, width, height);

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

参数

x

矩形起点的 x 轴坐标。

y

矩形起点的 y 轴坐标。

width

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

height

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

示例

一个简单的填充矩形

这是一段使用 strokeRect 方法的简单的代码片段。

HTML

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

JavaScript

矩形的左上角是（20,10）。它的宽度为160，高度为100。

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

结果

应用多种上下文设置

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

HTML

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

JavaScript

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);

结果

规范

浏览器兼容性

BCD tables only load in the browser

参见

• 接口定义，CanvasRenderingContext2D
• CanvasRenderingContext2D.strokeStyle
• CanvasRenderingContext2D.clearRect()
• CanvasRenderingContext2D.fillRect()