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) 開始。
輸出:
Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.
LinkedIn