CanvasRenderingContext2D: rect() 方法
基线 广泛可用
此功能已完善，可在许多设备和浏览器版本上运行。 自 2015 年 7 月.
报告反馈
Canvas 2D API 的**CanvasRenderingContext2D.rect()**方法向当前路径添加一个矩形。
语法
注意： 要在一个步骤中创建和渲染矩形，请使用
fillRect()或strokeRect()方法。rect(x, y, width, height)
js
rect()方法创建一个矩形路径，其起点位于(x, y)，大小由width和height指定。
参数-
x
矩形起点的 x 轴坐标。-
y
矩形起点的 y 轴坐标。-
width
矩形的宽度。 正值表示向右，负值表示向左。-
height
矩形的高度。 正值表示向下，负值表示向上。
返回值
示例
无 (undefined).
绘制矩形
HTML
此示例使用
rect()方法创建一个矩形路径。 然后使用fill()方法渲染该路径。<canvas id="canvas"></canvas>
JavaScript
html
注意： 要在一个步骤中创建和渲染矩形，请使用
fillRect()或strokeRect()方法。const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath(); // Start a new path
ctx.rect(10, 20, 150, 100); // Add a rectangle to the current path
ctx.fill(); // Render the path
矩形的角位于 (10, 20)。 它宽度为 150，高度为 100。
规范
| 结果 |
|---|
| 规范 # HTML 标准 |
浏览器兼容性
dom-context-2d-rect-dev