Как нарисовать круг canvas

Canvas — html блок, который появился вместе с выходом html5. Его особенность в том, что он предоставляет js возможность рисовать внутри себя посредством несложного интерфейса.

Чтобы получить доступ к интерфейсу надо обратиться в js к канвасу и вызвать функцию getContext. Она принимает аргументом контекст, в котором будет рисовать.

В js можно изменить размеры окна canvas. Для этого стоит использовать константы — вряд ли в процессе игры или анимации они будут меняться.

Прямоугольники в canvas

В контексте canvas уже реализованы функции, отрисовывающие прямоугольники. Их всего три:

clearRect(x, y, width, height) — прямоугольник, работает, как ластик в paint
strokeRect(x, y, width, height) — контур прямоугольника
fillRect(x, y, width, height) — закрашенный прямоугольник

Цвета контура и заливки совпадают с цветами, установленными в fillStyle и strokeStyle. Для установки цветов можно использовать как rgb, так и rgba.

Использование линий для отрисовки фигур

Разберём функции рисования прямых линий на примере отрисовки треугольника.

Движение и поворот системы координат

Всё относительно, как говорил один старичок в двадцатом веке. Это правило не обошло и canvas. Добрые разработчики ввели две очень полезные функции:

translate(x, y)
rotate(angle)

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

Окружности и дуги

В canvas есть функция отрисовки дуг и окружностей.

arc(centerX, centeY, radius, startAngle, endAngle, direction)

Вот здесь разобран её синтаксис. Вот так можно нарисовать пакмена с её помощью:

Скриншот

Изображения

Кроме того в канвасе есть замечательная функция drawImage, которая рисует выбранную часть изображения с заданными размерами и координатами. Эта громадина может принимать до 9 аргументов. Первым аргументом во всех случаях является объект Image, после идут аргументы, описывающие масштаб и координаты изображения. Существует всего три способа параметризовать эту функцию:

Рисование фигур с помощью canvas

Теперь, установив наше окружение canvas, мы можем погрузиться в детали того, как рисовать в canvas. К концу этой статьи, вы научитесь рисовать прямоугольники, треугольники, линии, дуги и кривые, при условии что вы хорошо знакомы с основными геометрическими фигурами. Работа с путями весьма важна, когда рисуете объекты на canvas и мы увидим как это может быть сделано.

Сетка

Перед тем, как мы начнём рисовать, нам нужно поговорить о сетке canvas или координатной плоскости. Наш HTML каркас из предыдущей страницы включал в себя элемент canvas 150 пикселей в ширину и 150 пикселей в высоту. Справа можно увидеть этот canvas с сеткой, накладываемой по умолчанию. Обычно 1 единица на сетке соответствует 1 пикселю на canvas. Начало координат этой сетки расположено в верхнем левом углу в координате (0,0 ) . Все элементы размещены относительно этого начала. Таким образом, положение верхнего левого угла синего квадрата составляет х пикселей слева и у пикселей сверху, на координате (х, у) . Позже в этом уроке мы увидим, как можно перевести начало координат в другое место, вращать сетку и даже масштабировать её, но сейчас мы будем придерживаться настроек сетки по умолчанию.

Рисование прямоугольников

В отличие от SVG, <canvas> поддерживает только одну примитивную фигуру: прямоугольник. Все другие фигуры должны быть созданы комбинацией одного или большего количества контуров (paths), набором точек, соединённых в линии. К счастью в ассортименте рисования контуров у нас есть функции, которые делают возможным составление очень сложных фигур.

Сначала рассмотрим прямоугольник. Ниже представлены три функции рисования прямоугольников в canvas:

Рисование заполненного прямоугольника.

Рисование прямоугольного контура.

Очистка прямоугольной области, делая содержимое совершенно прозрачным.

Каждая из приведённых функций принимает несколько параметров:

x, y устанавливают положение верхнего левого угла прямоугольника в canvas (относительно начала координат);
width (ширина) и height (высота) определяют размеры прямоугольника.

Ниже приведена функция draw(), использующая эти три функции.

Пример создания прямоугольных фигур

Этот пример изображён ниже.

Screenshot	Live sample

Функция fillRect() рисует большой чёрный квадрат со стороной 100 px. Функция clearRect() вырезает квадрат 60х60 из центра, а функция strokeRect() создаёт прямоугольный контур 50х50 пикселей внутри очищенного квадрата.

На следующей странице мы рассмотрим две альтернативы методу clearRect(), и также увидим, как можно изменять цвет и стиль контура отображаемых фигур.

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

Рисование контуров (path)

Остальные примитивные фигуры создаются контурами. Контур — это набор точек, которые, соединяясь в отрезки линий, могут образовывать различные фигуры, изогнутые или нет, разной ширины и разного цвета. Контур (или субконтур) может быть закрытым.

Создание фигур используя контуры происходит в несколько важных шагов:

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

Здесь приведены функции, которые можно использовать в описанных шагах:

Создаёт новый контур. После создания используется в дальнейшем командами рисования при построении контуров.

Методы для установки различных контуров объекта.

Закрывает контур, так что будущие команды рисования вновь направлены контекст.

Рисует фигуру с внешней обводкой.

Рисует фигуру с заливкой внутренней области.

Первый шаг создания контура заключается в вызове функции beginPath() . Внутри содержатся контуры в виде набора суб-контуров (линии, дуги и др.), которые вместе образуют форму фигуры. Каждый вызов этого метода очищает набор, и мы можем начинать рисовать новые фигуры.

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

Вторым шагом является вызов методов, определяемых видом контура, который нужно нарисовать. Их мы рассмотрим позднее.

Третий и необязательный шаг — это вызов closePath() . Этот метод пытается закрыть фигуру, рисуя прямую линию из текущей точки в начальную. Если фигура была уже закрыта или является просто точкой, то функция ничего не делает.

Примечание: Когда вы вызываете fill() , то каждая открытая фигура закрывается автоматически, так что вы можете не использовать closePath() . Это обстоятельство не имеет место в случае вызова stroke() .

Рисование треугольника

Например, код для рисования треугольника будет выглядеть как-то так:

Результат выглядит так:

Screenshot	Live sample

Передвижение пера

Одна очень полезная функция, которая ничего не рисует, но связана по смыслу с вышеописанными функциями — это moveTo() . Вы можете представить это как отрыв (подъем) пера от бумаги и его перемещение в другое место.

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

При инициализации canvas или при вызове beginPath() , вы захотите использовать функцию moveTo() для перемещения в точку начала рисования. Можно использовать moveTo() и для рисования несвязанного(незакрытого) контура. Посмотрите на смайлик ниже.

Вы можете проверить это сами, используя участок кода ниже. Просто вставьте в функцию draw() , рассмотренную ранее.

Результат этого ниже:

Screenshot	Live sample

Если вы захотите увидеть соединение линии, то можете удалить вызов moveTo() .

Примечание: Подробнее о функции arc() ,посмотрите Дуги .

Линии

Для рисования прямых линий используйте метод lineTo() .

Рисует линию с текущей позиции до позиции, определённой x и y .

Этот метод принимает два аргумента x и y , которые являются координатами конечной точки линии. Начальная точка зависит от ранее нарисованных путей, причём конечная точка предыдущего пути является начальной точкой следующего и т. д. Начальная точка также может быть изменена с помощью метода moveTo() .

Пример ниже рисует два треугольника, один закрашенный и другой обведён контуром.

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

Screenshot	Live sample

Вы заметите разницу между закрашенным и обведённым контуром треугольниками. Это, как упоминалось выше, из-за того, что фигуры автоматически закрываются, когда путь заполнен (т. е. закрашен), но не тогда, когда он очерчен (т. е. обведён контуром). Если бы мы не учли closePath() для очерченного треугольника, тогда только две линии были бы нарисованы, а не весь треугольник.

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

Рисуем дугу с центром в точке (x,y) радиусом radius , начиная с угла startAngle и заканчивая в endAngle в направлении против часовой стрелки anticlockwise (по умолчанию по ходу движения часовой стрелки).

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

Рассмотрим детальнее метод arc(), который имеет пять параметров: x и y — это координаты центра окружности, в которой должна быть нарисована дуга. radius — не требует пояснений. Углы startAngle и endAngle определяют начальную и конечную точки дуги в радианах вдоль кривой окружности. Отсчёт происходит от оси x. Параметр anticlockwise — логическое значение, которое, если true , то рисование дуги совершается против хода часовой стрелки; иначе рисование происходит по ходу часовой стрелки.

Примечание: Углы в функции arc() измеряют в радианах, не в градусах. Для перевода градусов в радианы вы можете использовать JavaScript-выражение: radians = (Math.PI/180)*degrees .

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

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

Координаты x и y должны быть достаточно ясны. radius and startAngle — фиксированы. endAngle начинается со 180 градусов (полуокружность) в первой колонке и, увеличиваясь с шагом 90 градусов, достигает кульминации полноценной окружностью в последнем столбце.

Установка параметра clockwise определяет результат; в первой и третьей строках рисование дуг происходит по часовой стрелке, а во второй и четвёртой — против часовой стрелки. Благодаря if-условию верхняя половина дуг образуется с контуром, (обводкой), а нижняя половина дуг — с заливкой.

Примечание: Этот пример требует немного большего холста (canvas), чем другие на этой странице: 150 x 200 pixels.

Screenshot	Live sample

Безье и квадратичные кривые

Следующим типом доступных контуров являются кривые Безье, и к тому же доступны в кубическом и квадратичном вариантах. Обычно они используются при рисовании сложных составных фигур.

Рисуется квадратичная кривая Безье с текущей позиции пера в конечную точку с координатами x и y , используя контрольную точку с координатами cp1x и cp1y .

Рисуется кубическая кривая Безье с текущей позиции пера в конечную точку с координатами x и y , используя две контрольные точки с координатами ( cp1x , cp1y ) и (cp2x, cp2y).

Различие между ними можно увидеть на рисунке, изображённом справа. Квадратичная кривая Безье имеет стартовую и конечную точки (синие точки) и всего одну контрольную точку (красная точка), в то время как кубическая кривая Безье использует две контрольные точки.

Параметры x и y в этих двух методах являются координатами конечной точки. cp1x и cp1y — координаты первой контрольной точки, а cp2x и cp2y — координаты второй контрольной точки.

Использование квадратичных или кубических кривых Безье может быть спорным выходом, так как в отличие от приложений векторной графики типа Adobe Illustrator, мы не имеем полной видимой обратной связи с тем, что мы делаем. Этот факт делает довольно сложным процесс рисования сложных фигур. В следующем примере мы нарисуем совсем простую составную фигуру, но, если у вас есть время и ещё больше терпения, можно создать более сложные составные фигуры.

В этом примере нет ничего слишком тяжёлого. В обоих случаях мы видим последовательность кривых, рисуя которые, в результате получим составную фигуру.

Квадратичные кривые Безье

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

Screenshot	Live sample

Кубические кривые Безье

В этом примере нарисовано сердце с использованием кубических кривых Безье.

Screenshot	Live sample

Прямоугольники

Все эти методы мы видели в Рисование прямоугольников, которые рисуют прямоугольники сразу в canvas, так же есть метод rect() , который не отображает, а только добавляет контур рисования (path) заданного прямоугольника к последнему открытому контуру.

Добавляет в path прямоугольник, верхний левый угол которого указан с помощью (x, y) с вашими width и height

Когда этот метод вызван, автоматически вызывается метод moveTo() с параметрами (x, y). Другими словами, позиция курсора устанавливается в начало добавленного прямоугольника.

Создание комбинаций

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

Конечное изображение выглядит так:

Screenshot	Live sample

Мы не будем подробно останавливаться на том, так как это на самом деле удивительно просто. Наиболее важные вещи, которые следует отметить, это использование свойства fillStyle в контексте рисования и использование функции утилиты (в данном случае roundedRect() ). Использование функций утилиты для битов чертежа часто может быть очень полезным и сократить количество необходимого кода, а также его сложность.

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

Path2D объекты

Как мы видели в последнем примере, есть серия путей и команд для рисования объектов на вашем холсте. Чтобы упростить код и повысить производительность, объект Path2D (en-US), доступный в последних версиях браузеров, позволяет вам кешировать или записывать эти команды рисования. Вы можете быстро запускать свои пути. Давайте посмотрим, как мы можем построить объект Path2D :

Конструктор Path2D() возвращает вновь созданный объект Path2D необязательно с другим путём в качестве аргумента (создаёт копию) или необязательно со строкой, состоящей из данных пути SVG path .

Все методы path , такие как moveTo , rect , arc , или quadraticCurveTo , и т.п, которые мы уже знаем, доступны для объектов Path2D

API Path2D также добавляет способ комбинирования путей с использованием метода addPath . Это может быть полезно, если вы хотите, например, создавать объекты из нескольких компонентов.

Добавляет путь к текущему пути с необязательной матрицей преобразования.

Path2D пример

В этом примере мы создаём прямоугольник и круг. Оба они сохраняются как объект Path2D , поэтому они доступны для последующего использования. С новым API Path2D несколько методов были обновлены, чтобы при необходимости принять объект Path2D для использования вместо текущего пути. Здесь stroke и fill используются с аргументом пути, например, для рисования обоих объектов на холст.

Screenshot	Live sample

Использование SVG путей

Ещё одна мощная функция нового Canvas Path2D API использует данные пути SVG, SVG path data, для инициализации путей на вашем холсте. Это может позволить вам передавать данные пути и повторно использовать их как в SVG, так и в холсте.

Путь перемещается в точку ( M10 10 ), а затем горизонтально перемещается на 80 пунктов вправо ( h 80 ), затем на 80 пунктов вниз ( v 80 ), затем на 80 пунктов влево ( h -80 ), а затем обратно на start ( z ). Этот пример можно увидеть на странице Path2D constructor (en-US) .

Рисование окружностей через canvas на JavaScript

Следующий метод arc рисует дугу с центром в некоторой точке. Он принимает следующие параметры: x , y , радиус r , начальный угол startAngle , конечный угол endAngle , рисовать по или против часовой стрелки direction .

Параметр direction принимает следующие значения: true заставляет рисовать по часовой стрелке, false против часовой (по умолчанию).

При этом углы в методе arc измеряют в радианах, не в градусах. Для перевода градусов в радианы вы можете использовать следующую функцию:

How to draw a circle in HTML5 Canvas using JavaScript?

How to draw a simple circle in HTML5 Canvas using minimum JavaScript code?

5 Answers 5

Here is how to draw a circle using JavaScript in HTML5:

I took the answers above and turned them into a useful function:

Then, use it like so to draw a black circle with a red stroke (width 2) at coordinates 50,50, with radius 25:

First of all, you need to get the canvas context:-

Now let us define the position and radius:-

Now let us set the color and line width:-

Now, to draw the circle, we have to use the arc method and set the angle to 2 X π

Creating shapes is easier using new Canvas Path2D, which uses the same canvas drawing API, and allow separation of the declaration from drawing itself, and reuse of complex geometry:

Base on Sam’s answer, I combined all the parameters into one object so that it is more readable when using the function.

The Overflow Blog

Linked

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Читать:

Как в эксель дату перевести в текст

Как нарисовать круг canvas