fillrect() 方法是 HTML5 Canvas API 中強大且多功能的方法，它允許您在畫布上繪制填充矩形。通過改變矩形的屬性，您可以創建各種形狀和設計，從簡單的方框到復雜的圖像。

fillRect() 方法語法

fillRect() 方法的語法如下： javascript fillRect(x, y, width, height);x 和 y 指定矩形的左上角坐標。width 和 height 指定矩形的寬度和高度。

fillRect() 方法示例

以下是一個使用 fillRect() 方法在畫布上繪制紅色矩形的示例： javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContExt("2d");ctx.fillStyle = "red"; ctx.fillRect(10,10, 100, 100);

fillRect() 方法屬性

fillRect() 方法提供了幾個屬性，可用于自定義矩形的外觀：fillStyle：指定矩形的填充顏色。可以是顏色名稱（如“red”）、十六進制值（如“FF0000”）或 RGBA 值（如“rgba(255, 0, 0, 1)”）。strokeStyle：指定矩形的邊框顏色。可以使用與 fillStyle 相同的值。lineWidth：指定矩形邊框的寬度。miterLimit：指定矩形邊角的斜接限制。斜接限制確定當兩條線在銳角處相遇時，矩形邊角的銳度。

fillRect() 方法技巧

使用 fillRect() 方法時，這里有一些有用的技巧：使用不同的填充顏色和邊框顏色來創建對比。調整矩形的寬度和高度以創建不同的形狀。使用半透明度（在 RGBA 值中指定）來創建透明矩形。使用負值來繪制矩形的一部分。例如，fillRect(-100, 0, 100, 100) 將繪制一個從畫布左側延伸 100px 的矩形。

fillRect() 方法示例集合

以下是使用 fillRect() 方法創建各種形狀和設計的示例集合：簡單矩形： javascript ctx.fillRect(10, 10, 100, 100);圓形： javascript ctx.beginPath(); ctx.arc(50, 50, 50, 0, 2 Math.PI); ctx.fill();三角形： javascript ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineto(100, 10); ctx.lineTo(50, 100); ctx.fill();梯形： javascript ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(100, 10); ctx.lineTo(150, 100); ctx.lineTo(50, 100); ctx.fill();漸變矩形： javascript var gradient = ctx.createLinearGradient(0, 0, 100, 100); gradient.addColorStop(0, "red"); gradient.addColorStop(1, "blue");ctx.fillStyle = gradient; ctx.fillRect(10, 10, 100, 100);

結論

fillRect() 方法是 HTML5 Canvas API 中一個強大的工具，它允許您創建各種各樣的形狀和設計。通過了解該方法的語法和屬性，您可以探索 Canvas 繪圖的無限可能性。

---

---

相關標簽： 探索、 使用、 Canvas、 fillrect、 使用fillna方法填充數據是只能填充0、 繪圖的無限可能性、

上一篇：從初學者到專家的Canvasfillrect方法指南從

下一篇：通過fillrect代碼優化Canvas繪圖性能通過fi