Canvas API: рисование линий в JavaScript

В этом уроке вы узнаете, как рисовать линию с помощью 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, чтобы задать обводку и ширину линии.
Рейтинг
( Пока оценок нет )
Александр Русаков / автор статьи
Программист, разработчик, 12 лет опыта работы в крупных компаниях. Быстро освоил typescript, делюсь своими знаниями на страницах этого сайта.
Загрузка ...
JavaScript и TypeScript