Canvas — как нарисовать круг js


Содержание

Как рисовать круг на холсте?

Я использую javascript и холст, чтобы нарисовать математически разработанную шкалу (для измерения крутящего момента, он включает в себя Ньютон-метры и фунты). Естественно, я позиционировал свои тики, используя тригонометрию, и рисование линий дуги с использованием arc . Проблема возникла, когда им нужно было выстраиваться в линию, но было странное искажение. Затем я рисовал очень большой круг и сравнивал его с круговым выбором в GIMP, и было искажение. Круги согласуются каждые 45 градусов вокруг кругов, но между этими узлами холст, нарисованный кругом, отклоняется наружу, подобно восьмиугольнику, который может быть закруглен слишком далеко наружу, чтобы приблизить круг.

Почему происходят эти искажения? Как я могу нарисовать по кругу круг по кругу?

Это код, который я использовал для генерации искаженного круга.

Это может быть не минимально, я не знаю о релевантности context.lineCap , но это остаток кода, на котором он основан. На следующем скриншоте показана разница между кружком, нарисованным GIMP, и кругом, нарисованным в Chrome

javascript html5 canvas

1 ответ

10 Решение hexwab [2015-07-17 09:08:00]

Это Chromium Bug # 164241 (объявлено исправлено, хотя исправление еще не показало его). Короткий ответ: Chrome приближает круги с композитными кривыми Безье.

Мне не удалось воспроизвести это на Chromium (43.0.2357.130, Ubuntu), но это происходит на Firefox 39, хотя я не смог найти подобный отчет об ошибках для Firefox. Тот факт, что он исправляет каждые 90 градусов (не 45, по крайней мере, не для меня), указывает на то, что круги аппроксимируются 4 кривыми, так как конечные точки кривой гарантированно будут правильными.

К счастью, существует простой способ: создать путь, состоящий из более чем 4 кривых. 8 или даже 6 должно быть достаточно для радиусов, которые вы используете, но вы можете использовать больше, если хотите играть в безопасное место. Или вы можете увеличить число кривых в зависимости от радиуса, хотя вычисление оптимальной функции (минимальное n, которое будет производить точный круг для заданного радиуса r), нетривиально.

Как нарисовать круг в html5 canvas как отдельный холст?

Я работаю над проектом HTML5. В этом я получаю проблемы в рисовании круга. У меня есть холст, на котором изображение загружается. И когда я собираюсь нарисовать круг, я создаю новый холст (динамически), внутри которого я хочу нарисовать круг. Но Круг рисует неправильно. Как я могу выйти из этой проблемы?

Код для рисования выглядит следующим образом:

Если я изменю lineWidth на 10 или 15, он получит другую форму вместо круга.

Рисование в JavaScript

Тэг canvas и JavaScript

Что такое тэг canvas, т.е. «холст», и как он отображается браузерами, рассказал и показал на его собственной странице «Тэг CANVAS»

Я не стал добавлять её в верхний мини-навигатор. Сделал дополнительной.

Посетив предложенную страницу, думаю, станет понятно, что на ней говорить о рисовании можно весьма условно.

Скорее, об оригинальном оформлении сайта.

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

Эта же страница полностью посвящена рисованию в HTML, используя JavaScript, как оно и полагается по правилам веб-технологий.

Здесь показываю рисунки, созданные по этим правилам.

Основы рисования в JavaScript

Примеры рисунков, сделанные с помощью тэга canvas, показываю ниже. Первыми идут самые интересные, а под ними более простые рисунки, НО(!) именно их создание помогло мне хорошо разобраться в этом увлекательном процессе. К большинству изображениям добавил объяснения, как они были сделаны.
Однако, сначала следует сказать о главном, общем принципе рисования скриптом на HTML-страницах сайтов. смотреть рисунки сразу:

Общий же принцип рисования в javascript вот такой.

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

После прописывается javascript-код, который и создаёт само изображение.

Кстати! Все обычные атрибуты: ширину и высоту холста, его стиль, и т.д., если они НЕ подлежат дальнейшим изменениям , можно прописывать и в коде скрипта, как показал выше, и в HTML-коде тэга canvas. Сделал так в самом первом примере.

Важно! Показанный выше базовый код можно прописать немного иначе. Иногда встречаю примеры подобного написания в интернете.

Бывает, что весь код заключают в функцию, и выглядит он уже так:

Оба, показанных шаблона кода для рисования в JavaScript, работают одинаково, НО(!) последний «не терпит похожих соседей»!

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

Такое поведение скрипта вовсе не случайно!

Ведь, объект «window», который создаётся этой функцией, — коренной объект, и он превращает глобальные переменные в локальные, а они работают только внутри функций. Функции же загрузки документа — одинаковые!

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

Мне же нужно было, чтобы браузер выводил абсолютно все, созданные на этой странице изображения, без исключения!

Поэтому для своих рисунков использую только 1-ый вариант кода.

Команды рисования скриптом

Дальше, чтобы было понятно, следовало бы сказать об основных командах рисования, существующих в JavaScript.
Но их настолько много(!), что делать этого не стал. Гораздо проще — понять всё на примерах рисунков, сделанных с их помощью.

К тому же! Многие из них я достаточно подробно прокомментировал как в коде страницы, так и в описаниях примеров.


Рисунки в JavaScript

Ну, а теперь — самое интересное! Примеры рисунков, созданные с помощью тэга canvas и его «напарника» JavaScript.

Чёрно-белая шахматная доска

В этом примере нарисовал два пустых квадрата, которые сформировали рамку вокруг изображения.
Далее закрасил её внутреннюю часть чёрным цветом, а затем в цикле for сделал в ней нужные квадратные «отверстия», чтобы через них просвечивала пустота. Что получилось в итоге, видно ниже.

Цветная шахматная доска

А здесь, практически, всё то же самое. Изменил лишь цвета рамки и клеток.

Круг из разноцветных секторов

Этот пример рисования в JavaScript интересен тем, что круг, при каждой перезагрузке страницы, будет менять цвета своих секторов.

Много разноцветных кружков

Аналогично. Но здесь ещё интереснее! При каждой перезагрузке страницы будут меняться: форма, цвет, расположение. Короче, всё, что прописано в коде рисунка.

Чтобы было понятно, где посчитал нужным, вставил в этот код комментарии.

Наложение рисунков

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

Наложение рисунков №2

Ещё один пример наложения нескольких рисунков друг на друга. Все подробности создания этого примера подробно написал в комментариях к его коду.

Разные виды наложений 2-ух рисунков

Два рисунка можно наложить друг на друга и по-другому. Это можно сделать с помощью функции function drawShapes(type) , внутри которой есть команда context.globalCompositeOperation = type; , которая, в свою очередь, может принимать одно из 11-ти значений.

Накладывается круг на квадрат, т.к. круг по коду прописал позже, а значит — отображаться он будет верхним
(если иное не задать в значении команды).

Указал все возможные значения этой команды в таблице, в ячейки которой вставил тэги (с идентификаторами!) .

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

Цукерберг рекомендует:  Чпу - Доступ к массивам $_SESSION и $_COOKIES при внедрении ЧПУ.

Кстати! Здесь можно НЕ центрировать! В HTML-коде таблицы уже есть центрирование.

source-over source-in source-out source-atop
destination-over destination-in destination-out destination-atop
lighter copy xor

Разноцветные круги с обводкой

В этом примере с помощью функции JavaScript нарисовал несколько кругов разного размера и цвета.
Подробности об их создании написал ниже.

Разноцветные сектора

А здесь, хоть они и очень похожи на верхние (непорезанные) разноцветные круги, нарисовал совершенно другие объекты.
Это сектора, или дуги. Как угодно. Создаются они уже с помощью другой функции, и она гораздо сложнее, чем та, с помощью которой рисуются обычные круги.

Аналогично. Об их создании можно узнать ниже. смотреть сразу:

Прямоугольники с тенью

Нарисовал их, как и все (кроме таблицы наложений 2-ух рисунков) показанные примеры, на одном холсте. В коде есть комментарии, какой к какому относится.

Рисунок с линейным градиентом

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

var gradient = context.createLinearGradient(x1, y1, x2, y2);

В параметрах команды задаются координаты точек, по которым он будет проходить, т.е. из точки x1, y1 в точку x2, y2 .

Задаём цвета несколькими командами gradient.addColorStop(offset, «color»);

В них offsetотступ задаётся со значениями от «0» до «1», а «color»нужный цвет.

Далее, созданный градиент командой context.fillStyle = gradient; мы определяем для ранее созданной переменной градиента, как стиль заливки.

И, наконец, командой context.fillRect(x1, y1, x2, y2); рисуем прямоугольник для его заливки в самом начале созданным градиентом.

Важно! Координаты нарисованного прямоугольника должны совпадать с координатами созданного градиента.

Рисунок с радиальным градиентом

В принципе, мало чем отличается от примера, показанного выше. Разница в значении глобальной переменной, предназначенной для хранения создаваемого градиента.

var gradient = context.createRadialGradient(x1, y1, r1, x2, y2, r2);

В параметрах команды задаётся плавный переход цвета из окружности с центром в точке x1, y1 и радиусом r1 в окружность с центром в точке x2, y2 и радиусом r2 .


В результате получается вот такой шар с бликом и тенью.

Видимость (прозрачность)

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

В этом примере написания команды указано: полная видимость.

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

Дробные значения указываются через точку
( перед точкой можно не ставить).

Кстати! Подробно, с визуальными примерами работы разных фильтров, можно посмотреть здесь: «Прозрачность элементов» (откроется в новом окне) .

Правда, там рассказываю о фильтрах CSS , но каскадная таблица стилей очень похожа, и часто очень тесно связана с JavaScript.

Ну, а пример работы упомянутой команды js-кода вот он.

Вывод изображения (растрового)

А так выводятся растровые изображения, адрес которых можно прописать между тэгов .

Не забывать! Присвоить идентификаторы и изображению, и тэгу canvas.

Далее применяем функцию window.onload = function() , в коде которой задаётся вывод нужного изображения командой (действием) ctx.drawImage(img, 10, 10);

Важно! Обычным образом (без скрипта) браузер ничего не покажет, что бы мы ни писали в коде рисунка между тэгов . Пробовал!

Добавлял в тэг атрибуты w >оригинальные размеры рисунка!

А за его видимость, т.е. позиционирование на холсте, отвечают два последних параметра команды ctx.drawImage(img, 10, 10);

Кстати! ctx — это сокращённое context

Текст

Вывод текста с помощью тэга canvas и переменной кода JavaScript, в которой он написан, и хранится до поры до времени. Ниже пример кода.

var mText = «Это canvas и JavaScript!»;

А так текст выводится скриптом на экран.

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

Квадрат и круг (взаимодействие 2-ух холстов)

Все строчки кода данного примера подробно прокомментировал в исходнике. Чтобы немного отдалить холсты с рисунками друг от друга, использовал символ неразрывного пробела » » между ними.

Это красный квадрат: Это синий круг:

Интересен показанный пример тем, что в нём хорошо видно: оба холста прекрасно «уживаются» на одной строчке веб-страницы. При соответствующих их размерах, разумеется.

Линии

Этот подраздел страницы отвёл под изучение методов рисования разного вида линий. Это, пожалуй, один из самых важных навыков , который нужно освоить для того, чтобы научиться рисовать в JavaScript.

Поэтому, сначала немного теории.

Список команд рисования

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

«Путь» — «Path» — определяет очертания рисунка, который может быть закрашен, то есть залит цветом, и/или обведён контурной линией (*см. список) .

  • context.beginPath(); — начало нового пути (начало рисования) часто можно и БЕЗ этой команды.
  • context.moveTo(); — устанавливает начальное положение пути (начальная точка рисования линии).
  • context.lineTo(); — проводит линию, начиная от текущей позиции и до указанной точки.
  • context.lineW > — (числовое значение) задаёт толщину линии.
  • context.lineCap = «round»; — стиль конца линии (здесь — «круглый»).
  • context.lineJoin = «miter»; — стиль соединения двух линиий (здесь — «острый»).
  • context.miterLimit = number; — (числовое значение) ограничение длины соединения двух линиий.
  • context.arc(); — рисует дугу (часть окружности).
  • context.arcTo(); — определяет дугу, начиная от текущей позиции.
  • context.quadraticCurveTo(); — определяет квадратичную кривую от текущей позиции.
  • context.bezierCurveTo(); — определяет кривую Безье от текущей позиции.
  • context.closePath(); — завершает путь (конец рисования линии).
  • context.fillStyle = «color»; — устанавливает цвет заливки рисунка (color — значение цвета).
  • context.fill(); — заливает рисунок установленным цветом.
  • context.strokeStyle = «color»; — задаёт цвет обводки, т.е. цвет контура.
  • context.stroke(); — очерчивает рисунок контуром (вывод нарисованного на экран ).
  • context.clip(); — ограничивает область видимости нарисованного.

Подробности написания этих команд лучше всего смотреть в исходном коде примеров рисования.
К тому же — сами примеры наглядно демонстрируют их действие.

Работа с командами, имеющими «To» , напоминает рисование карандашом БЕЗ отрыва от бумаги. А вот команда moveTo() позволяет оторвать от «бумаги» такой «карандаш», поставить его в какую-нибудь новую точку, и рисовать снова.

Необходимо отметить, что позиция отрисовки, в которой заканчивается одна из команд с «To» — lineTo(), bezierCurveTo() и т. д. , одновременно является и начальной позицией для следующей рисовальной команды с «To».

Ширина линии задаётся командой context.lineWidth , где единица соответствует одному пикселю. Значение по умолчанию — 1.0

Стиль концов линии определяет команда context.lineCap , и она может иметь три возможных значения (*см. список) .

Наглядно смотреть здесь:
Неважно, что на рисунке показаны значения атрибута CSS. Значения одни и те же.

Пример рисования простых линий

Нарисовал с помощью команд JavaScript несколько линий: прямых, соединяющихся, и ниже вывел их на экран.


Соединение линий

Стиль соединения линий задаётся командой context.lineJoin , и может принимать тоже три возможных значения (*см. список) .

Наглядная памятка значений здесь:

А ниже я нарисовал, и вывел их с помощью JavaScript. В код рисунка вставил комментарии, какой блок кода к какому примеру относится.

Ограничение длины соединения

Можно ограничить длину соединения линий с помощью команды ctx.miterLimit .

Значение miterLimit – это длина, до которой может продлеваться уголок после точки стыка.

Эта команда используется, только если для lineJoin выбран тип «miter»

Допустимые значения команды находятся в диапазоне 1÷255px (все остальные значения будут скриптом округляться до 1 или 255 ).

Поэтому, значения должны быть НЕ менее 1.0, поскольку любые дробные числа будут восприниматься скриптом, как 1.0, а это означает отсутствие удлинения .

По умолчанию ctx.miterLimit = 10.0; .

В данном примере я установил значение 25 пикселей.

Рисование с помощью прямых линий

Теперь, изучив самые основы рисования в JavaScript, уже вполне возможно и нарисовать что-нибудь простое с помощью обычных прямых линий. Примеры ниже.

Рисуем трезубец

Здесь нарисовал трезубец, очень похожий на корону. О том, как «покрасил» её в золотой цвет и обвёл её контур, подробно написал в комментариях к коду.

Важно! Не забывать! Задав, к примеру, цвет заливки с помощью команды context.fillStyle = «gold»; (золотая), нужно обязательно запустить саму заливку командой context.fill(); .
Иначе никакой заливки цветом НЕ получится! То же самое касается и обводки.

Если же просто (без задания цвета заливки) прописать команду context.fill(); — зальётся чёрным (по умолчанию).

Рисуем домик

А здесь — всего из нескольких линий у меня получился маленький домик с голубыми стенами и чёрной крышей. В его коде я всё подробно прокомментировал.

Важно знать! Если прописать команду заливки «крыши» context.fill(); в самый конец кода, то рисунок весь зальётся чёрным цветом. Весь, кроме половинной толщины «стен» (обводки) .

Конечно, рисовать только прямыми линиями можно, но уж очень примитивно. Нужно научиться эти самые линии всячески изгибать.

Проще всего изогнуть прямую линию, прописав её дугой. Делается это с помощью команды context.arc() , в которой можно задать шесть значений (*см. список) .

  • centerX — координата «X» центра дуги.
  • centerY — координата «Y» центра дуги.
  • radius — размер радиуса окружности, по которой рисуется дуга.
  • startAngleначало дуги (*в радианах!) .
  • endAngleконец дуги (*в радианах!) .
  • anticlockwiseнаправление дуги по или против «часовой» (*булево значение) .

*Prim! Параметр anticlockwise сейчас установил в значение «false», т.е. рисовать по часовой стрелке, но можно было бы его и НЕ задавать.

По умолчанию — это значение и так стоит в «false», т.е. рисует по часовой стрелке, а если выставить ему «true», тогда будет рисовать против часовой.

Цукерберг рекомендует:  Шаблоны проектирования Команда

Пример дуги вывел на экран, а подробности её создания в комментариях к коду.
Обратить внимание!
В этом коде прописал значения переменных в одном(!) var — через запятую.

Сделал пособие (схему) для рисования различных дуг:

А здесь привёл вычисления, которые могут понадобиться для пересчёта из одних единиц в другие.
Из градусов в радианы: var radians = degrees * Math.PI / 180;
И из радиан в градусы: var degrees = radians * 180 / Math.PI;

Полезное(!) тригонометрическое пособие (схема) для расчёта и рисования всевозможных окружностей, их секторов и дуг находится здесь:

Угловая линия

Закругление углов линии рисуется с помощью команды context.arcTo() , которая принимает пять обязательных параметров (*см. список) .

  • xPos + width — первая координата «X» начала дуги.
  • yPos — координата «Y» начала дуги.
  • xPos + width — вторая координата «X» конца дуги.
  • yPos + radius — координата «Y» конца дуги.
  • radiusрадиус дуги.

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

Но принципы рисования угловых линий те же самые, что и в предыдущем примере.

Кривые Безье

Сначала немного о самих кривых.

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

context.quadraticCurveTo(Px, Py, x, y);
и
context.bezierCurveTo(P1x, P1y, P2x, P2y, x, y);

x и y — это точки, в которые нужно поставить «карандаш», а координаты Px и Py в квадратичной кривой — это дополнительные точки, используемые для её построения.


В кубической кривой, соответственно, имеются ещё две дополнительные точки.

Ниже нарисовал сразу два типа кривых Безье, а в коде рисунка сделал комментарии, какие строчки отвечают за какую из них.

*Prim! Строчки кода можно менять местами . Результат один и тот же.

Цветные кривые Безье

А в этом примере рисования я раскрасил аналогичные (с такими же параметрами) кривые Безье в разные цвета, и изменил их толщину.

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

Ограничение области видимости

Ограничить область видимости можно командой context.clip(); .

Она ничего не рисует, но после её добавления, любой объект будет виден только в том случае, если он находится внутри области , на которой определён путь.

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

*Prim! Если «закомментировать» эту команду, то увидим, как на самом деле нарисованы линии.
А на самом деле — они далеко выходят за границы круга, и соединяются там.

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

В следующем примере использовал линии для отрисовки закрашенного треугольника в верхнем левом углу и контурного треугольника в нижнем правом. Установил размер холста 500 X 500 пикселей.

Кстати! Для закрашенного треугольника уже не потребовалась команда ctx.closePath() , поскольку ctx.fill() — автоматически закрывает путь.

Prim* Пробовал и здесь прописать закрытие. Результат такой же!
Однако, иногда разница есть. Поэтому всё же лучше закрытие прописывать!
Пример такой разницы смотреть ниже:

Думаю, хоть они и чрезвычайно важны для освоения основ рисования в JavaScript, хватит заниматься линиями. Нужно изучить и другие возможности этой технологии.

Круги, сектора, квадраты

В этом подразделе привожу несколько примеров объектов, нарисованных с помощью разных методов JavaScript.

Частично залитые круги

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

Рисунок №1. Частично залитый круг

Рисунок №2. Разная заливка круга

Рисунок №3. Круг из залитого сектора и цветного контура

Сектора кругов

С помощью команды arc() можно рисовать целые окружности и их сектора, а также различные дуги.

context.arc(x, y, radius, startAngle, endAngle, anticlockwise);

О значениях параметров этой команды подробно написал ранее. вспомнить:

Дальше javascript-код отрисовывает два ряда секторов кругов. В обоих рядах я начинаю с 0 радиан , и увеличиваю каждый следующий сектор на endAngle .

В первом (зелёном) ряду отрисовка секторов проходит по часовой стрелке, а в нижнем (синем) — против часовой.

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

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

Квадраты со скруглёнными углами

В этом подразделе привожу два примера квадратов со скруглёнными углами. Сначала показываю их контура, а после — их же, но уже залитые цветом (по умолчанию чёрным).

Рамку для холстов здесь сделал с помощью CSS вне тэгов canvas.

Важно! ctx — это сокращённое context Можно использовать либо одно, либо другое написание в кодах, НО(!) в одном коде должно быть одинаково!

Контура квадратов со скруглёнными углами №1

Квадраты со скруглёнными углами №2

Кстати! Если в коде прописана команда заливки ctx.fill() , то команду обводки ctx.stroke() в данном случае (с чёрными квадратами) можно уже НЕ прописывать.

А вот с командой закрытия ctx.closePath(); — аккуратнее!

Если в данном случае её НЕ прописать, то эти чёрные квадраты станут отображаться чуть по-другому! Пробовал!

А поэтому, хоть в коде рисунка и присутствует команда заливки цветом ctx.fill() , которая по правилам рисования в JavaScript должна автоматически закрывать путь, нужно всегда всё проверять!

Взаимодействие canvas и JavaScript


Возможности «дуэта»: тэг canvas + JavaScript не ограничивается лишь рисованием.

Интересно, что JavaScript позволяет не только рисовать внутри этого элемента, но и очищать его от нарисованного.

Их взаимодействие можно посмотреть и проверить здесь:

Использование тэга canvas и JavaScript

Эта технология работает с пикселями. Её ещё называют «динамический PNG», поэтому чаще всего этот тэг используют для создания динамических рисунков, т.е. таких, которые должны изменяться в режиме реального времени.

Рисовать в HTML можно, и даже гораздо проще, используя тэг svg, когда изображение постепенно появляется в процессе написания кода. Можно легко править этот код, наблюдая, как изменяется рисунок.

А вот рисовать в JavaScript таким образом не получится!

Нужно прописать весь код рисунка до самого конца, чтобы он появился наконец-то на веб-странице.
Тем не менее, эта технология рисования используется, причём, довольно успешно!

Где и когда? А вот где.

Полезно! Отличную статью о том, когда лучше использовать тэги canvas, а что предпочтительнее делать тэгами svg, я нашёл на сайте помощи Microsoft™.

Давал уже скачивать эту статью на странице «Рисование в HTML» , но, думаю, она и тут будет весьма кстати!

Взять её можно здесь:

А пройти сразу в упомянутый раздел, где я, к тому же, коротко объяснил, в чём принципиальные отличия между этими двумя тэгами, здесь:

По нижним навигационным стрелкам можно либо вернуться в раздел «JavaScript», к которому относится данная страница, либо посетить «Учебные сайты» , где есть много другой, разной и интересной информации.

Верхний мини-навигатор позволит выбрать любой из разделов, относящихся к программному рисованию в HTML.

Все права защищены. Copyright © 2009 — Коротеев Владимир.

Рисуем круг, движущийся вслед за курсором мыши

Сегодня мы с помощью canvas JavaScript нарисуем круг, который будет двигаться вслед за курсором мыши.

Основной подход

Прежде чем мы перейдем к коду, поговорим о том, как мы создадим круг, следующий за курсором мыши. Но сначала нам нужно нарисовать эту окружность:

Надпись на картинке: Круг нарисован без соблюдения масштаба.

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

Этот пример не такой уж сложный, чтобы разобраться в нем. Но это не значит, что нет ничего интересного “ за кулисами ”. Далее при рассмотрении JavaScript мы коснемся некоторых важных аспектов приведенного кода, которые вы, возможно, не поняли.

С чего начать работу?

Первое, что нам нужно — это страница, готовая к работе с canvas JavaScript . Если у вас еще нет ее, то поместите следующий код в пустую HTML-страницу :

Есть canvas JavaScript , который имеет идентификатор id со значением « myCanvas ». Для экономии времен, я предоставил вам две строки кода, необходимых для доступа к элементу canvas и его контексту рендеринга. Если все это для вас ново, уделите несколько минут и прочитайте статью « С чего начать работу с элементом Canvas ».

Рисуем круг

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

Построение окружности js

написал небольшой скрипт на js в котором небольшой круг описывает собой окружность, но на уровне точки окружности по оси x, круг начинает увеличивать скорость, а потом уменьшает ее. Можете пожалуйста объяснить почему это происходит, и как это пофиксить чтобы он двигался с одной скоростью. Код

1 ответ 1

Проблема в расчетах положения точки на круге. Вот вам рабочий пример:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript html canvas или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.13.35428

Canvas — как нарисовать круг js

В рубрике «HTML» Вы найдете бесплатные уроки по работе с этим языком гипертекстовой разметки, который лежит в основе большинства сайтов.

Цукерберг рекомендует:  Плагин jQuery для построения графиков.

Данная рубрика заменит Вам полноценный «HTML учебник». Здесь Вы сможете найти ответы на большинство вопросов, связанных с HTML и DHTML.

Бесплатные уроки HTML для начинающих

Помимо текстовых уроков, Вы также сможете найти на нашем сайте полезные видео уроки по HTML. Простые и понятные примеры и объяснения помогут Вам в кратчайшие сроки освоить этот базовый язык «сайтостроения».


Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем

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

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.

50+ бесплатных Bootstrap 3 шаблонов и элементов UI

Подборка бесплатных UI материалов и Bootstrap 3 шаблонов за уходящий месяц.

Зум слайдер

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

JavaScript — рисовать круг на холсте

Я занимаюсь JavaScript и HTML, поэтому, пожалуйста, оставайтесь со мной.

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

По некоторым причинам он не рисует красный круг при нажатии на холст. Не могли бы вы помочь мне устранить эту проблему и рассказать мне о том, как реализовать функцию изменения цвета?

Спасибо за любые материалы.

Обновленный код с функцией единого и двойного щелчка.

Ваш код отлично работает на jsfiddle, когда JavaScript включен в

  • В вашем коде нет . Поместите свой CSS внутри .
  • Переместите JavaScript до конца .

Рисование в при помощи Fabric.js

Использовать canvas не очень сложно, приветствуется если у вас есть понимание HTML и JavaScript.

Предварительная «настройка» нашего холста.

Сanvas с английского переводится как холст. пожалуй самое интересное в HTML5 так как он предназначен для создания графики при помощи скриптования.
Посмотрим на сам элемент

Я думаю вы уже поняли из заголовка урока, что рисовать мы будем не стандартными методами, а с использованием библиотеки Fabric.js.
Проблема в том, что родной canvas API ужасно низко-уровневый. Одно дело если нужно нарисовать несколько простых фигур или графиков, и забыть о них. Другое — интерактивность, изменение картинки в какой-то момент, или рисование более сложных фигур. Дело в том, что обычные canvas методы позволяют нам вызывать только очень простые графические комманды, вслепую меняя целый битмап холста . Нужно нарисовать прямоугольник? Используем fillRect(left, top, width, height). Нарисовать линию? Используем комбинацию moveTo(left, top) и lineTo(x, y). Как будто рисуем кисточкой по холсту, накладывая всё больше и больше краски, почти без какого-либо контроля. Fabric.js включает в себя обектную модель, которой так не хватает при работе с , а так же SVG парсер, интерактивный слой и множество других, незаменимых инструментов.
Скачайте последнюю версию Fabric.js и положите рядом с вашим файлом. Теперь немного изменим наш шаблон.

Переходим к рисованию.

Давайте изобразим прямоугольник. Все очень просто, создадим переменную rect и после строки

var example = document.getElementBy ; // меняем цвет клеток ctx.fillRect(100, 100, 100, 60);

Рисовать прямоугольник — это конечно не серьёзно. Давайте хоть сделаем с ним что-нибудь интересное. Например, повернем на 45 градусов.

var example = document.getElementBy ; // меняем цвет клеток ctx.translate(100, 100); ctx.rotate(Math.PI / 180 * 45); ctx.fillRect(-50, -30, 100, 60);

Используя Fabric, всё что надо было сделать, это поменять значение угла на 45. А вот с обычными методами всё не так-то просто. Во первых, мы не можем управлять объектами напрямую. Вместо этого, приходится менять позицию и угол самого битмапа (без Fabric ctx.translate, ctx.rotate). Потом рисуем прямоугольник, при этом не забывая отодвинуть битмап соответственно (-50, -30), так, чтобы прямоугольник появился на 100,100. Ещё надо не забыть перевести угол из градусов в радианы при повороте битмапа.

Теперь вам, наверное, становится понятно зачем существует Fabric.

Мы уже видели как работать с прямоугольниками, используя fabric.Rect конструктор. Но, конечно же, Fabric предоставляет многие другие простые фигуры: круги, треугольники, эллипсы и т.д. Все они доступны из fabric объектов, соответственно, fabric.Circle, fabric.Triangle, fabric.Ellipse и т.д.

7 базовых фигур доступных в Fabric:

Нужно нарисовать круг, треугольник? Просто создаём соответствующий объект и добавляем его на холст. Тоже самое с другими формами:

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

Fabric берёт на себя заботу о состоянии холста и перерисовке. От нас требуется только менять сами объекты.

Что бы подвинуть объект используйте метод set:

Во первых, есть атрибуты, меняющие позицию — left, top; размер — width, height; сам рендеринг (отображение объекта) — fill, opacity, stroke, strokeWidth; масштаб и поворот — scaleX, scaleY, angle; и даже переворот (180 градусов) — flipX, flipY.


Список всех атрибутов можно найти на официальном сайте

Canvas, основы работы с помощью JavaScript

Добрый день, уважаемые читатели.

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

Что такое canvas и зачем он нужен?

Canvаs (холст) — элемент HTML5 для создания растрового двухмерного изображения. Обычно используется совместно с javascript.

Ширину и высоту canvas можно изменять.

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

Canvas так же используется в WebGL для аппаратного ускорения 3D графики. В результате можно создавать даже 3D игры, работающие в окне браузера.

Создание нашего canvas

Создается canvas путем обычной вставки тега в html-код. Далее через обычный javascript мы получаем элемент и содержимое canvas (строка 10, 11) и рисуем обведенный прямоугольник, который растягивается на всю ширину и высоту canvas.

Примитивы в canvas

В canvas можно рисовать такие геометрические элементы, как:

  1. Прямоугольники
  2. Линии
  3. Окружности, дуги
  4. Различные кривые, эллипс

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

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

Есть еще 2 варианта для рисования прямоугольников:

Ниже приведен пример использования этих 2-х способов:

В результате мы нарисовали большой черный прямоугольник и вырезали область из точки (50, 50) размером 300 пикселей по ширине и 200 пикселей по высоте. Ниже представлено, как это будет выглядеть.

Более интересный пример:

Ниже пример, как это выглядит:

Линии, окружности, дуги

Рисование фигур из линий происходит немного сложней. Здесь используется 4 метода:

Так же нам понадобятся следующие методы для рисования линий:

Ниже приведен пример использования данных методов:

Вот такая замечательная звезда у нас получилась:

Кривая Безье

Нарисовать любую фигуру так же можно с помощью кривых Безье. Для этого используется 2 метода quadraticCurveTo, bezierCurveTo. Для кривых Безье должна быть задана начальная точка, от которой будет прорисовываться фигура.

Все, вроде, хорошо, но вот постоянно рисовать черным цветом не очень интересно. Разнообразим!

Цвет линий и заливки в canvas

Для задания цвета есть 2 свойства: fillStyle и strokeStyle. Задать цвет можно несколькими вариантами:

Попробуем что-нибудь раскрасить, используя разные способы задания цвета:

На этом пока все.

Спасибо за внимание! Жду вас в следующей статье!

Подписываемся на рассылку ��

Автор статьи: Alex. Категория: JavaScript
Дата публикации: 19.02.2014

Canvas js как нарисовать круг — подборка видео уроков

На этой странице собраны лучшие ролики о том Canvas js как нарисовать круг. Если вы хотите научиться рисовать с нуля, просто начните делать это ежедневно. Постарайтесь понять, в каком направлении искусства вы хотите развиваться: иллюстрации, концепт-арт, графический дизайн, детские рисунки, анимация или что-то другое.

Если вы еще не знаете, то наш сайт поможет вам определиться. Просто просматривайте страницы и пробуйте рисовать то что показано в видеоуроках. Если у вас есть какие-то полезные советы о том Canvas js как нарисовать круг, пожалуйста напишите об этом в комментариях. Тем самым вы поможете и нам и многим другим людям.

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

Помните, рисование — это не талант, это выученный навык и тысячи часов практики.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих