JavaScript 中的 fillRect() 函数

JavaScript 2周前 24

在本文中，你将学习如何使用 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>