Как сделать круг в canvas

Обновлено: 08.07.2024

Здравствуйте подписчики, и гости моего канала. Продолжаю изучать модуль Tkinter в предыдущих частях разобрали:

create_oval() –данный метод позволяет рисовать эллипсы и круги. В него передаются координаты точек предполагаемого прямоугольника, описывающего эллипс. Пары координат можно передавать через запятую (50, 50, 250, 150) или для удобства пары координат можно заключать в скобки ((150, 150), (300, 300)).

В первом случае нарисовали эллипс, а во втором круг.

Метод кроме координат, так же как и ранее рассмотренные методы может принимать дополнительные параметры:

width – ширина линии (установим 7 пикселей);

fill – цвет фигуры (установим blue);

activefill – цвет фигуры при наведении курсора мыши (установим red);

outline – цвет контура фигуры (установим green);

activeoutline – цвет контура фигуры при наведении курсора мыши (установим black)

Наш круг получился синего цвета с зеленым контуром шириной 7 пикселей, при наведении на него курсором мышки цвет заливки меняется на красный цвет, а контур на черный цвет.

Для примера создадим окружность и в ней нарисуем три сектора. Первый из 0 – го градуса и +30 градусов, закрасим его синим цветом. Второй из 180 – го градуса и – 60 градусов, закрасим его зеленым цветом. И третий сектор из 270 – го градуса и + 10 градусов и закрасим его красный.

В этой статье рассмотрим основы canvas, а точнее создания фигур, от обычных квадратов, до рисования линий и кругов.

Рисуем обычную фигуру:

Для начала надо создать HTML элемент canvas, пишем код который ниже.

В элементе canvas мы и будем рисовать фигуры, атрибуты width и height, нужны чтобы задать размер, иначе ширина и высота будут равны нулю и мы не чего там не увидим, по атрибуту id, будем получать сам элемент в JavaScript.

Canvas в JavaScript:

Алгоритм рисования фигуры очень простой, берём canvas элемент, и рисуем в нем фигуру, вот как рисовать квадрат.

Вот что получилось.

Теперь рассмотрим одну функцию по подробнее, это функция getContext('2d') , она делает контекст для рисования, то есть в нашем случае будем рисовать 2d графику, также можно работать и с 3d графикой, но об этом в другой раз.

базовые функции для рисования квадрата:

fillStyle — Назначает цвет для заливки;
strokeStyle — Назначает цвет для контуров или линий;
fillRect(x, y, width, height) — Создаёт квадрат или прямоугольник с заливкой;
strokeRect(x, y, width, height) — Создаёт квадрат или прямоугольник без заливки, то есть контуры;
clearRect(x, y, width, height) — стирает область заданную в параметрах;

Давайте подробнее рассмотрим параметры функций, если с width и height всё понятно, это ширина и высота прямоугольника соответственно, а вот с x и y не всё так однозначно как хотелось бы, в том дело, что расчёт ведётся не так как мы привыкли в математики, там наоборот y идёт с верху вниз, x с лева на права, думаю схема которая нарисована ниже поможет в этом разобратся.

Рисуем линии:

Для линий точно также создаём элемент canvas.

Сanvas линии в JavaScript:

Алгоритм рисования линий таков, берём первую позицию и рисуем линии до второй позиции.

Рисование кривых в браузере всегда была сложной задачей для разработчиков, либо приходилось генерировать изображение на сервере, либо писать сложные JS функции. HTML5 Canvas позволяет с легкостью создавать кривые разных типов:

Для каждого типа есть свои методы arc(), quadraticCurveTo(), bezierCurveTo() соответственно

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

Так-же можно нарисовать дугу используя arcTo() метод, который используется для создания закругленных углов, про этот метод будет рассказано позже.

Пример дуги

HTML5 Canvas Arc (дуга) объяснение

Посмотрите на схему выше, дуга - это не более чем часть окружности воображаемого круга, этот воображаемый круг можно определить координатами x,y и радиусом.

Далее мы можем определить саму дугу, для этого нужно выбрать 2 точки по диаметру этой мнимой окружности, и углы от центральной точки до вашей точки будут начальным и конечным углами. Углы задаются в радианах.

И последним аргументом мы передаем направление рисования, по умолчанию это false, что означает что рисоваться будет по часовой стрелке.

Квадратичная кривая

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

Пример квадратичной кривой

HTML5 Canvas Quadratic Curves (квадратичная кривая) объяснение

Посмотрите на схему выше. Контрольная точка определяет кривизну вашей квадратичной кривой, создав две мнимые касательные которые связаны с начальной точкой и конечной точкой. Начальная точка определяется методом MoveTo(), с которым мы знакомились раньше. Перемещение контрольной точки дальше от начальной и конечной точки создает резкие кривые, и наоборот.

Кривая Безье

Для того чтоб создать кривую Безье в HTML5 Canvas вы можете использовать метод bezierCurveTo().
Кривая Безье определяется начальной точкой, двумя контрольными точками и конечной точкой. В отличие от квадратичной кривой, кривая Безье определяется двумя контрольными точками, а не одной, что позволяет создавать более сложную кривизну.

Здравствуйте! В этом уроке рассмотрим в этом уроке рассмотрим, как с помощью canvas можно рисовать разные фигуры — линии, дуги и делать комплексные фигуры. Для оформления сложных фигур используется концепция геометрических путей, которые представляют собой набор линий, окружностей, прямоугольников и других более мелких деталей, необходимых для построения более сложной фигуры.

Для создания нового пути надо вызвать метод beginPath(), а после завершения пути вызывается метод closePath():

Между вызовами методов beginPath() и closePath() находятся методы, непосредственно создающие различные участки пути.

Методы moveTo() и lineTo()

Для начала рисования пути нам надо зафиксировать начальную точку этого пути. Это можно сделать с помощью метода moveTo(), который имеет такое определение:

Метод перемещает нас на точку с координатами x и y.

Метод lineTo() рисует линию. Он имеет схожее определение:

Метод рисует линию от текущей позиции до точки с координатами x и y.

Теперь нарисуем ряд линий:

Здесь мы устанавливаем начало пути в точку (30, 20), затем от нее рисуем линию до точки (100, 80) и далее рисуем еще одну линию до точки (150, 30).
Хотя мы нарисовали несколько линий, пока мы их не увидим, потому что их надо отобразить на экране. Для отображения пути надо использовать метод stroke():

Хотя мы нарисовали все две линии, но по факту мы увидим 3 линии, которые оформляют треугольник. Дело в том, что вызов метода context.closePath() завершает путь, соединяя последнюю точку с первой. И в результате образуется замкнутый контур.

Если нам не надо замыкание пути, то мы можем удалить вызов метода context.closePath():

Метод rect

Метод rect() создает прямоугольник. Мы уже с ним встречались в уроке по рисованию прямоугольников. Он имеет следующее определение:

Где x и y — это координаты верхнего левого угла прямоугольника относительно canvas, а width и height — соответственно ширина и высота прямоугольника. Нарисуем, к примеру, такой прямоугольник:

Просмотреть пример
Стоит отметить, что такой же прямоугольник мы могли бы создать из линий:

Метод fill()

Метод fill() заполняет цветом все внутреннее пространство фигуры:

Просмотреть пример
С помощью свойства fillStyle опять же можно задать цвет заполнения фигуры. В данном случае это синий цвет.

Метод clip()

Метод clip() позволяет вырезать из canvas определенную область, а все, что вне этой области, будет игнорироваться при последующей отрисовке.

Для понимания этого метода сначала нарисуем два прямоугольника:

Просмотреть пример
Теперь применим метод clip() для ограничения области рисования только первым прямоугольником:

Просмотреть пример
Поскольку вызов метода clip() идет после 1-го прямоугольника, то из второго прямоугольника будет нарисована только та часть, которая попадает в первый прямоугольник.

Метод arc()

Метод arc() добавляет к пути участок окружности или дугу. Он имеет следующее определение:

Здесь используются следующие параметры:

x и y: x- и y-координаты, в которых начинается арка
radius: радиус окружности, по которой создается арка
startAngle и endAngle: начальный и конечный угол, которые усекают окржность до дуги. В качестве единиц измерения для углов применяются радианы. Например, полная окружность — это 2π радиан. Если, к примеру, нам надо нарисовать полный круг, то для параметра endAngle можно указать значение 2π. В JavaScript эту веричину можно получить с помощью выражения Math.PI * 2.
anticlockwise: направление движения по окружности при отсечении ее части, ограниченной начальным и конечным углом. При значении true направление против часовой стрелки, а при значении false — по часовой стрелке.

Просмотреть пример
Последний параметр anticlockwise играет важную роль, так как определяет движение по окружности, и в случае изменения true на false и наоборот, мы можем получить совершенно разные фигуры:

Метод arcTo()

Метод arcTo() также рисует дугу. Он имеет следующее определение:

Где x1 и y1 — координаты первой контрольной точки, x2 и y2 — координаты второй контрольной точки, а radius — радиус дуги.

Просмотреть пример
Здесь мы перемещаемся вначале на точку (0, 150), и от этой точки до первой контрольной точки (0, 0) будет проходить первая касательная. Далее от первой контрольной точки (0, 0) до второй (150, 0) будет проходить вторая касательная. Эти две касательные оформляют дугу, а 140 служит радиусом окружности, на которой усекается дуга.

Метод quadraticCurveTo()

Метод quadraticCurveTo() создает квадратичную кривую. Он имеет следующее определение:

Где x1 и y1 — координаты первой опорной точки, а x2 и y2 — координаты второй опорной точки.

Метод bezierCurveTo(). Кривая Безье

Метод bezierCurveTo() рисует кривую Безье. Он имеет такое определение:

Где x1 и y1 — координаты первой опорной точки, x2 и y2 — координаты второй опорной точки, а x3 и y3 — координаты третьей опорной точки.

Комплексные фигуры

И в заключение объединим несколько фигур вместе и нарисуем более сложную двухмерную сцену:

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Читайте также: