Как использовать метод fillRect в JavaScript для рисования

В этом руководстве вы узнаете, как использовать метод JavaScript fillRect() для рисования прямоугольников заданной ширины и высоты на холсте.

fillRect() — это метод объекта контекста 2D-рисования. Метод fillRect() позволяет рисовать прямоугольник с заливкой в позиции (x,y) с указанными параметрами и высотой на холсте.

Синтаксис:

ctx.fillRect(x,y,width,height);

В этом синтаксисе:

  • x — координата по оси x начальной точки прямоугольника.
  • y — координата по оси Y начальной точки прямоугольника.
  • width — ширина прямоугольников. Оно может быть положительным или отрицательным. Положительные значения располагаются справа, а отрицательные — слева.
  • height — высота прямоугольника. Он также может быть положительным или отрицательным. Положительные значения уменьшаются, а отрицательные увеличиваются.

fillStyle контекста 2D-рисования будет определять стиль заливки прямоугольника.

Пример

Ниже показан файл 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>

Следующая функция drawRectangles() в файле app.js будет рисовать два прямоугольника:

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();

Как это работает:

  • Сначала выберите элемент холста с помощью метода document.querySelector() :
const canvas = document.querySelector('#canvas');
  • Во-вторых, проверьте, поддерживает ли браузер canvas API:
if(!canvas.getContext) {
 return;
 }
  • В-третьих, получите объект контекста 2D-рисования:
const ctx = canvas.getContext('2d');
  • В-четвертых, установите стиль заливки цветом #F9DC5C и нарисуйте первый прямоугольник с помощью fillRect() :
ctx.fillStyle = '#F9DC5C';
 ctx.fillRect(100, 100, 150, 100);

Первый прямоугольник начинается с (100,100) и имеет ширину 150 пикселей и высоту 100 пикселей.

Наконец, установите стиль заливки на синий с альфа-каналом 0,5, что создаст эффект прозрачности. И используйте метод fillRect() для рисования второго прямоугольника:

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

Второй прямоугольник начинается с (200,150). Поскольку мы передали отрицательную ширину и высоту 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>

В этом примере холст будет иметь следующий стиль, указанный в файле style.css :

canvas {
 border: solid 1px #ccc;
 background-color: #000;
 }

В файле 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 & lt; rows; r++) {
        // draw rows
        for (let c = 0; c & lt; 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);
            }

Функция drawWall() принимает двухмерный контекст рисования, а также высоту и ширину стены:

  • Сначала определите высоту(bh) и ширину(bw) каждого кирпича, а также расстояние между двумя кирпичами:
const bh = 20,
 bw = 50,
 space = 5;
  • Во-вторых, рассчитайте количество рядов и столбцов кирпичей на основе размера кирпича, ширины и высоты стены:
// calculate the rows and columns of the wall
 const rows = Math.ceil(height /(bh + space));
 const columns = Math.ceil(width /(bw + space));
  • В-третьих, рисуйте кирпичи с помощью fillRect(). Используйте два цикла for, чтобы рисовать кирпичи ряд за рядом.
// draw rows
for (let r = 0; r & lt; rows; r++) {
    // draw columns
    for (let c = 0; c & lt; 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);
        }

Обратите внимание, что первый кирпич четного ряда будет иметь ширину, равную половине ширины обычного кирпича.

На следующем рисунке показан вывод:

Заключение

  • Используйте JavaScript fillRect() для рисования заполненного прямоугольника, который начинается с (x,y) и имеет указанные ширину и высоту.
  • Используйте свойство fillStyle, чтобы задать стиль заливки прямоугольника.
Рейтинг
( Пока оценок нет )
Александр Русаков / автор статьи
Программист, разработчик, 12 лет опыта работы в крупных компаниях. Быстро освоил typescript, делюсь своими знаниями на страницах этого сайта.
Загрузка ...
JavaScript и TypeScript