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 2015年7月.
Canvas 2D API 的 CanvasRenderingContext2D.strokeRect() 方法根据当前的 strokeStyle 和其它设置描绘一个矩形的描边（轮廓）。
语法
js
strokeRect(x, y, width, height) strokeRect() 方法绘制一个描边矩形，其起点为 (x, 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 # dom-context-2d-strokerect-dev |