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 |
瀏覽器相容性
載入中…