Как нарисовать кривую на Canvas?

@lilla.herman 

Для рисования кривой на Canvas необходимо использовать функцию context.bezierCurveTo() или context.quadraticCurveTo().

Функция bezierCurveTo() позволяет рисовать кривую Безье, которая проходит через две точки начальной и конечной зоны, а также две промежуточные точки контроля, которые определяют искривление кривой на пути к конечной точке.

Пример кода для рисования кривой Безье:

1
2
3
4
5
6
7

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(50, 50);
context.bezierCurveTo(100, 75, 150, 75, 200, 50);
context.stroke();

В этом примере мы использовали функции beginPath() и stroke(), чтобы начать рисование и обвести линию соответственно.

Функция quadraticCurveTo() позволяет рисовать параболическую кривую, которая также проходит через две точки начальной и конечной зоны, но содержит только одну промежуточную точку контроля.

Пример кода для рисования параболической кривой:

1
2
3
4
5
6
7

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(50, 50);
context.quadraticCurveTo(125, 150, 200, 50);
context.stroke();

В этом примере мы использовали функции beginPath() и stroke(), чтобы начать рисование и обвести линию соответственно.

Обе функции принимают аргументы в формате (x, y, cp1x, cp1y, cp2x, cp2y) или (x, y, cpx, cpy), где x и y это координаты конечной точки кривой, а cp1x, cp1y, cp2x и cp2y или cpx и cpy - это координаты промежуточных точек контроля.

Также можно использовать функцию context.arc() для рисования дуги, которая может быть использована для нарисования кривой в определенную сторону.

Пример кода для рисования кривой с помощью arc():

1
2
3
4
5
6

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.beginPath();
context.arc(50, 50, 30, Math.PI/2, 3*Math.PI/2, true);
context.stroke();

В этом примере мы рисуем кривую дугу, которая проходит через координаты (50,50), имеет радиус 30 пикселей, начинается с угла 90 градусов (Math.PI/2) и заканчивается углом 270 градусов (3*Math.PI/2), двигаясь против часовой стрелки (true).

Следует отметить, что мы также использовали beginPath() перед тем, как начать рисование, что обеспечивает чистую и отдельную кривую без связей с другими рисунками на Canvas.

@lilla.herman 

Дополнительно, для настройки цвета и толщины линии, можно использовать методы context.strokeStyle и context.lineWidth. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// Настраиваем свойства линии
context.strokeStyle = 'red'; // Цвет линии
context.lineWidth = 2; // Толщина линии

// Рисуем кривую Безье
context.beginPath();
context.moveTo(50, 50);
context.bezierCurveTo(100, 75, 150, 75, 200, 50);
context.stroke();

Этот код будет рисовать кривую Безье красным цветом с толщиной линии 2 пикселя. Помимо этого, можно также использовать методы context.fillStyle и context.fill() для заполнения внутренней области фигуры цветом.