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