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

Пользователь

от lilla.herman , в категории: Другие , 10 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от narciso , 10 месяцев назад

@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.