JavaScript 中的 fillRect() 函式

Shiv Yadav 2024年2月15日

JavaScript JavaScript Method

在本文中，你將學習如何使用 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) 開始。

輸出：

在 JavaScript 中使用 fillRect() 函式

作者： Shiv Yadav

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.

在 JavaScript 中使用 fillRect() 函式

相關文章 - JavaScript Method

在 JavaScript 中使用 `fillRect()` 函式