HOWTO · JavaScript
JavaScript 中的 fillRect() 函式
本文將幫助你瞭解 JavaScript 中 fillRect 方法的工作原理。
本頁內容
在本文中，你將學習如何使用 JavaScript fillRect() 函式在畫布上建立具有定義寬度和高度的矩形。
在 JavaScript 中使用 fillRect() 函式
HTML 畫布的 fillRect() 函式在網頁上生成一個填充矩形。黑色 是預設顏色。使用 JavaScript，你可以使用 canvas 元素在網頁上繪製圖片。
每個畫布包含兩個元件，分別指示其高度和寬度、高度和寬度。
語法：
obj.fillRect(a, b, width, height);
a 是 Rectangle 起點的 x 軸位置，b 是 Rectangle 起點的 y 軸位置。width 是矩形的寬度，可以是正數也可以是負數，其中正值顯示在右側，而負值顯示在左側。
height 是 Rectangle 的高度，它也可以是正數或負數。正值在減少，而負值在增加。
示例程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fillRect</title>
</head>
<body>
<h1>fillRect canvas JavaScript</h1>
<canvas id="canvas" height="300" width="300">
</canvas>
</body>
<script>
function drRect() {
const canva = document.querySelector('#canvas');
if (!canva.getContext) {
return;
}
const rect = canva.getContext('2d');
rect.fillStyle = '#800080';
rect.fillRect(50, 50, 200, 250);
}
drRect();
</script>
</html>
使用 document.querySelector() 方法選擇畫布元素。確定瀏覽器是否支援畫布 API。
獲取 2D 繪圖上下文物件。將填充樣式更改為 #800080，紫色顏色並使用 fillRect() 函式繪製矩形。
矩形的寬度為 200 畫素，高度為 250 畫素，從 (50, 50) 開始。
輸出：
