В этом уроке вы узнаете, как использовать метод JavaScript strockRect() для рисования на холсте контура прямоугольника.
strokeRect() — это метод контекста 2D-рисования. Метод strokeRect() позволяет рисовать очерченный прямоугольник со стилем штриха, полученным из текущего свойства strokeStyle.
Синтаксис:
ctx.strokeRect(x, y, width, height);
В этом синтаксисе:
x— координата по оси x начальной точки прямоугольника.y— координата по оси Y начальной точки прямоугольника.width— это ширина прямоугольника. Оно может быть положительным или отрицательным. Еслиwidthположительна, метод рисует прямоугольник от(x, y) вправо. В противном случае он рисует прямоугольник от(x, y) влево.height— высота прямоугольника. И высота также может быть положительной или отрицательной. Если он положительный, метод рисует прямоугольник от(x,y)до низа. В противном случае он рисует прямоугольник от(x,y)до вершины.
strokeRect() рисует прямо на холсте, не изменяя текущий путь. Это означает, что любой последующий вызов fill() или stroke() не будет иметь никакого эффекта.
Пример
Ниже показана страница 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 strokeRect</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>JavaScript strokeRect() Demo</h1> <canvas id="canvas" height="400" width="500"> </canvas> <script src="js/app.js"></script> </body> </html>
В файле app.js определена функция, которая рисует два очерченных прямоугольника:
function drawOutlinedRects() {
const canvas = document.querySelector('#canvas');
if (!canvas.getContext) {
return;
}
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(100, 100, 150, 100);
ctx.strokeStyle = 'green';
ctx.strokeRect(200, 150, -150, -100);
}
drawOutlinedRects();На следующем рисунке показан вывод:
Как это работает:
- Сначала выберите элемент холста с помощью метода
querySelector(). - Затем проверьте, поддерживает ли браузер canvas API.
- Затем получите контекст 2D-рисования из элемента холста.
- После этого установите стиль обводки на
redи используйте методstrokeRect()для рисования первого контурного прямоугольника. - Наконец, установите стиль обводки на зеленый и нарисуйте второй очерченный прямоугольник. В этом случае мы передали отрицательную ширину и высоту
strokeRect(), чтобы нарисовать прямоугольник слева и сверху от его начальной точки.