CanvasRenderingContext2D：rect() 方法
CanvasRenderingContext2D.rect() 方法是 Canvas 2D API 的一部分，用于向当前路径添加一个矩形。
与其他修改当前路径的方法一样，此方法不会直接渲染任何内容。要将矩形绘制到画布上，您可以使用 fill() 或 stroke() 方法。
注意： 要一步创建并渲染一个矩形，请使用 fillRect() 或 strokeRect() 方法。
语法
js
rect(x, y, width, height)
rect() 方法创建一个矩形路径，其起始点位于 (x, y)，大小由 width 和 height 指定。
参数
返回值
无（undefined）。
示例
绘制矩形
本示例使用 rect() 方法创建了一个矩形路径。然后使用 fill() 方法渲染该路径。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
矩形的左上角位于 (10, 20)。其宽度为 150，高度为 100。
js
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
结果
规范
| 规范 |
|---|
| HTML # dom-context-2d-rect-dev |
浏览器兼容性
加载中…