CanvasRenderingContext2D: fillRect() 方法
Canvas 2D API 的 CanvasRenderingContext2D.fillRect() 方法會繪製一個根據當前 fillStyle 填充的矩形。
此方法直接繪製到畫布上，而不會修改當前路徑，因此任何後續的 fill() 或 stroke() 呼叫都不會對其產生影響。
語法
js
fillRect(x, y, width, height)
fillRect() 方法會繪製一個填充矩形，其起始點為 (x, y)，尺寸由 width 和 height 指定。填充樣式由當前的 fillStyle 屬性決定。
引數
返回值
無（undefined）。
示例
一個簡單的填充矩形
本示例使用 fillRect() 方法繪製了一個綠色的填充矩形。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
矩形的左上角位於 (20, 10)。它的寬度為 150，高度為 100。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(20, 10, 150, 100);
結果
填充整個畫布
此程式碼片段用一個矩形填充了整個畫布。這對於建立背景非常有用，然後可以在其上繪製其他內容。要實現這一點，矩形的尺寸應等於 <canvas> 元素的 width 和 height 屬性。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);
規範
| 規範 |
|---|
| HTML # dom-context-2d-fillrect-dev |
瀏覽器相容性
載入中…