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 AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

参见

文档标签和贡献者

标签: 
此页面的贡献者: zhangchen, ice-i-snow
最后编辑者: zhangchen,