В этом уроке вы узнаете, как рисовать линию с помощью Canvas API в JavaScript.
Чтобы нарисовать линию на холсте, выполните следующие действия:
- Сначала создайте новую строку, вызвав метод
beginPath(). - Во-вторых, переместите курсор рисования в точку
(x,y)не рисуя линию, вызвав методmoveTo(x, y). - Наконец, нарисуйте линию от предыдущей точки до
point(x,y), вызвав методlineTo(x,y).
Установка обводки линии
Если вы хотите обвести линию с помощью strokeStyle, вы можете вызвать метод stroke() после вызова метода lineTo(x,y).
Установка ширины линии
Чтобы установить ширину линии, вы используете свойство lineWidth контекста 2D-рисования перед вызовом метода stroke() :
ctx.lineWidth = 10;
Метод lineTo(x,y)
Метод lineTo(x,y ) принимает как положительные, так и отрицательные аргументы.
Если x положительный, метод lineTo(x,y) рисует линию от начальной точки вправо. В противном случае он рисует линию от начальной точки влево.
Если y положительно, метод lineTo(x,y) рисует линию от начальной точки вниз по оси y. В противном случае он рисует линию от начальной точки до оси Y.
Пример
Ниже показан файл 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 - Drawing a Line</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>JavaScript - Drawing a Line</h1> <canvas id="canvas" height="400" width="500"> </canvas> <script src="js/app.js"></script> </body> </html>
Этот app.js рисует линию красного цвета, шириной 5 пикселей от точки(100, 100) до(300, 100):
function draw() {
const canvas = document.querySelector('#canvas');
if (!canvas.getContext) {
return;
}
const ctx = canvas.getContext('2d');
// set line stroke and line width
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
// draw a red line
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.stroke();
}
draw();Ниже показан вывод:
Функция drawLine()
Следующая drawLine() рисует линию из одной точки в другую с указанными штрихом и шириной:
function drawLine(ctx, begin, end, stroke = 'black', width = 1) {
if (stroke) {
ctx.strokeStyle = stroke;
}
if (width) {
ctx.lineWidth = width;
}
ctx.beginPath();
ctx.moveTo(...begin);
ctx.lineTo(...end);
ctx.stroke();
}
Чтобы нарисовать линию от (100,100) до (100,300) с зеленым цветом линии и шириной линии 5 пикселей, вы можете вызвать drawLine() следующим образом:
const canvas = document.querySelector('#canvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
drawLine(ctx, [100, 100], [100, 300], 'green', 5);
}
Заключение
- Используйте
beginPath(),moveTo(x, y)иlineTo(x,y)для рисования линии. - Используйте параметры
strokeStyleиlineWidth, чтобы задать обводку и ширину линии.