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