如何在画布上使用 JavaScript fillRect 绘制矩形

摘要: 在本教程中，您将学习如何使用 JavaScript fillRect() 方法在画布上绘制指定宽度和高度的矩形。

JavaScript fillRect() 方法简介

fillRect() 是 2d 绘图上下文对象的函数。fillRect() 方法允许您在画布上的 (x,y) 位置绘制一个填充的矩形，该矩形具有指定的宽度和高度。

以下是 fillRect() 方法的语法

ctx.fillRect(x,y,width,height);Code language: CSS (css)

在此语法中

x 是矩形起点在 x 轴上的坐标。
y 是矩形起点在 y 轴上的坐标。
width 是矩形的宽度。它可以是正数或负数。正值表示向右，而负值表示向左。
height 是矩形的高度。它也可以是正数或负数。正值表示向下，而负值表示向上。

2d 绘图上下文的 fillStyle 属性将决定矩形的填充样式。

JavaScript fillRect() 示例

以下显示了包含画布元素的 index.html 文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Canvas fillRect</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <h1>JavaScript Canvas fillRect</h1>

    <canvas id="canvas" height="400" width="500">
    </canvas>

    <script src="js/index.js"></script>

</body>

</html>Code language: HTML, XML (xml)

以下 app.js 文件中的 drawRectangles() 函数将绘制两个矩形

function drawRectangles() {
    const canvas = document.querySelector('#canvas');

    if (!canvas.getContext) {
        return;
    }

    const ctx = canvas.getContext('2d');

    ctx.fillStyle = '#F9DC5C';
    ctx.fillRect(100, 100, 150, 100);

    ctx.fillStyle = 'rgba(0,0,255,0.5)';
    ctx.fillRect(200, 150, -150, -100);
}

drawRectangles();Code language: JavaScript (javascript)

它是如何工作的。

首先，使用 document.querySelector() 方法选择画布元素

const canvas = document.querySelector('#canvas');
Code language: JavaScript (javascript)

其次，检查浏览器是否支持画布 API

if (!canvas.getContext) {
    return;
}Code language: JavaScript (javascript)

第三，获取 2d 绘图上下文对象

const ctx = canvas.getContext('2d');Code language: JavaScript (javascript)

第四，将填充样式设置为 #F9DC5C 颜色，并使用 fillRect() 方法绘制第一个矩形

ctx.fillStyle = '#F9DC5C';
ctx.fillRect(100, 100, 150, 100);Code language: JavaScript (javascript)

第一个矩形从 (100,100) 开始，宽度为 150 像素，高度 为 100 像素。

最后，将填充样式设置为蓝色，alpha 值为 0.5，这将创建一个透明效果。并使用 fillRect() 方法绘制第二个矩形

ctx.fillStyle = 'rgba(0,0,255,0.5)';
ctx.fillRect(200, 150, -150, -100);Code language: JavaScript (javascript)

第二个矩形从 (200,150) 开始。由于我们向 fillRect() 方法传递了负宽度和高度，因此宽度在左侧，高度在上方。

下图显示了输出

以下是演示的链接.

使用 JavaScript fillRect() 绘制砖墙

在本例中，您将学习如何使用 fillRect() 方法绘制砖墙。

以下显示了包含画布元素的 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Canvas fillRect</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <h1>JavaScript fillRect() - Draw a Brick Wall</h1>

    <canvas id="canvas" height="400" width="500">
    </canvas>

  
  <script src="js/app.js"></script>

</body>

</html>Code language: HTML, XML (xml)

在本例中，画布将在 style.css 文件中指定以下样式


canvas {
    border: solid 1px #ccc;
    background-color: #000;
}Code language: CSS (css)

在 app.js 文件中，定义一个名为 drawWall() 的函数，该函数在画布上绘制砖墙

function drawWall(ctx, canvasWidth, canvasHeight) {
    // define brick height and width, and spaces between them
    const bh = 20,
        bw = 50,
        space = 5;

    // calculate the rows and columns of the wall
    const rows = Math.ceil(canvasHeight / (bh + space));
    const columns = Math.ceil(canvasWidth / (bw + space));

    // draw columns
    for (let r = 0; r < rows; r++) {
        // draw rows
        for (let c = 0; c < columns; c++) {
            if (r % 2) {
                c == 0 ? ctx.fillRect(c * (bw + space), r * (bh + space), bw / 2, bh) :
                    ctx.fillRect(c * (bw + space) - bw / 2, r * (bh + space), bw, bh);
            } else {
                ctx.fillRect(c * (bw + space), r * (bh + space), bw, bh);
            }
        }
    }
}Code language: JavaScript (javascript)

drawWall() 函数接受 2d 绘图上下文以及墙的高度和宽度。

首先，定义每块砖的高度 (bh) 和宽度 (bw) 以及两块砖之间的间距

const bh = 20,
      bw = 50,
      space = 5;Code language: JavaScript (javascript)

其次，根据砖块的尺寸以及墙的宽度和高度计算砖块的行数和列数

// calculate the rows and columns of the wall
const rows = Math.ceil(height / (bh + space));
const columns = Math.ceil(width / (bw + space));Code language: JavaScript (javascript)

第三，使用 fillRect() 方法绘制砖块。使用两个 for 循环按行绘制砖块。

// draw rows
for (let r = 0; r < rows; r++) {
    // draw columns
    for (let c = 0; c < columns; c++) {
        if (r % 2) {
            c == 0 ? ctx.fillRect(c * (bw + space), r * (bh + space), bw / 2, bh) :
                ctx.fillRect(c * (bw + space) - bw / 2, r * (bh + space), bw, bh);
        } else {
            ctx.fillRect(c * (bw + space), r * (bh + space), bw, bh);
        }
    }
}Code language: JavaScript (javascript)

请注意，偶数行的第一块砖的宽度将等于正常砖块宽度的一半。

下图显示了输出

以下链接显示了演示。

摘要

使用 JavaScript fillRect() 绘制从 (x,y) 开始并具有指定宽度和高度的填充矩形。
使用 fillStyle 属性设置矩形的填充样式。

本教程对您有帮助吗？