CanvasRenderingContext2D.strokeRect()

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

结果

规范

Specification Status Comment
HTML Living Standard
CanvasRenderingContext2D.strokeRect
Living Standard  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
strokeRectChrome Full support YesEdge Full support 12Firefox Full support 1.5IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

参见