В этом руководстве вы узнаете, как использовать метод 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
, чтобы задать стиль заливки прямоугольника.