HTML 5 Canvas — Итог. Использование JavaScript для рисования графики | by John Eckert
Canvas — это HTML-элемент, который можно использовать для рисования изображений с помощью JavaScript. Чаще всего он используется для таких вещей, как анимация, графики и создание другой линейной графики, которую нелегко сделать с помощью div.
Чтобы отобразить что-либо на холсте, первое, что вам нужно сделать, это определить его контекст с помощью функции getContext() . GetContext принимает один параметр, который указывает, сколько размеров будет иметь чертеж. Для двухмерных рисунков вы проходите «2д» . Также возможен 3D-рисунок, но это тема для другого дня.
Хорошо, теперь, когда у нас есть холст, как нам рисовать на нем?
Холст функционирует как сетка с началом в верхнем левом углу. Мы можем использовать эту сетку для планирования нашего изображения.
Теперь пришло время написать немного JavaScript —
Мы будем использовать некоторые предопределенные функции, чтобы установить желаемые параметры стиля, определить шаги, необходимые для создания желаемого изображения, а затем визуализировать изображение на холсте.
Перед тем, как мы создадим наш шедевр, давайте посмотрим на некоторые из доступных нам инструментов:
1. Перемещение:
moveTo(x,y) перемещает перо в указанные координаты без рисования.
stroke() рисует фигуру, заданную путем, используя его контур. Это то, что на самом деле отображает ваш рисунок на холсте.
2. Строки:
lineTo(x,y) рисует линию из текущей позиции рисования в позицию, заданную в качестве аргументов.
3. Дуги:
arc(x, y, radius, startAngle, endAngle, direction) рисует дугу с центром в заданных координатах и заданным радиусом. Также необходимо указать startAngle и endAngle в формате x * Math.PI и направление (по часовой или против часовой стрелки).
arcTo(x1, y1, x2, y2, радиус) рисует дугу с заданными контрольными точками и радиусом, соединенную с предыдущей точкой прямой линией
4.
Прямоугольники:
fillRect(x, y, width, height) рисует закрашенный прямоугольник с левым верхним углом в начальных координатах и заданными шириной и высотой.
strokeRect(x, y, width, height) таким же образом рисует контурный прямоугольник.
clearRect(x, y, width, height) очищает указанную прямоугольную область, делая ее прозрачной.
5. Пути:
Путь представляет собой ряд точек, соединенных линиями различной формы. Пути также можно закрывать и заполнять, чтобы получились сплошные формы. Первый шаг, как только вы начнете создавать путь, должен быть moveTo() для установки начальной позиции.
beginPath() создает новый путь.
После того, как вы вызовете это, следующие команды рисования будут частью этого пути, пока путь не будет визуализирован.
closePath() добавляет прямую линию, соединяющую начало пути, закрывающую фигуру.
fill() рисует сплошную форму, заполняя путь.
strokeStyle() устанавливает стиль штриха, рисуемого контуром. Стиль можно задать в виде цвета, градиента или узора.
Мы можем создавать более сложные изображения, разбивая их на несколько форм. Например, предположим, что я хотел нарисовать человека-палку:
- Во-первых, давайте установим цвета для заливки и обводки.
- Затем мы будем использовать
moveTo(), чтобы расположиться в центре верхней части холста, и использоватьarc(), чтобы нарисовать голову.
- Затем, вызвав
stroke()иfill(), мы визуализируем круг.
Хорошо, теперь тело:
- Мы начнем новый контур без заливки и с толщиной линии 5 и поместим перо в центр головы.
- Инструментом «Линия» мы проводим прямую линию вниз, а затем вторую линию под углом для ноги.
- Перемещая перо обратно к точке соединения первой ноги, мы можем нарисовать другую ногу в противоположном направлении.
Затем мы можем переместить перо к верхней части тела и таким же образом нарисовать две руки. Та-да!
Затем мы можем переместить перо к верхней части тела и таким же образом нарисовать две руки. Та-да!Хорошо, это не совсем Пикассо, но с тэгом canvas можно многое сделать. Используя эти базовые элементы (и некоторые другие), вы можете делать очень сложные вещи, включая 3D-рисунки и анимацию.
(не нарисовано на холсте)Canvas DrawLine не гладкий — ошибки и другие проблемы
Soumya_Gautam
#1
Уважаемое сообщество,
Когда я пытаюсь нарисовать быстрые каракули с помощью блока DrawLine холста, кривые каракулей не получаются плавными. Расстояние между PrevX/Y и CurrentX/Y очень велико (десятки миллиметров), поэтому кривые выглядят как многоугольники, а не как гладкие кривые. Я не уверен, почему расстояние между двумя последовательными точками такое большое.
Я также попытался добавить DrawCircle вместе с DrawLine в блок Canvas Dragged. Это сгладило края линий, но в точках поворота они не искривлены, а имеют резкие угловые повороты.
Эта ошибка меня очень беспокоит. Я пытаюсь создать приложение для рисования. Но эти многоугольные линии выглядят очень раздражающими. Пожалуйста помоги.
Заранее большое спасибо.
Сумья
dora_paz
#2
Для создания более гладкой линии попробуйте следующий код
1 Нравится
SteveJG
#3
https://groups.
Soumya_Gautam
#4
Спасибо dora_paz, я попробовал эту же последовательность. но бесполезно. Линия по-прежнему не гладкая на кривых.
дора_паз
#5
С приведенным выше кодом это выглядит на моем телефоне из приложения, которое я сделал
Patryk_F
#6
Рисовать нужно точками, а не линиями
Soumya_Gautam
#7
Привет, Патрик, я тебя не понял. Способ рисования кривой — использование линии рисования. Точки разбросаны и не соединяются в одну кривую. Пожалуйста, поделитесь примером кода блока, если можете. Спасибо
Сумья_Гаутам
#8
Дорогая dora_paz, я не знаю, как быстро ты рисуешь. Пожалуйста, посмотрите на мои каракули. Вышеуказанный медленнее и намного более плавный по сравнению с нижним.
Пожалуйста, посмотрите, есть ли у вас решение. Я не могу ожидать, что пользователи моего приложения всегда будут рисовать медленнее.
Сумья_Гаутам
#9
Патрик_Ф
#10
По очкам выглядит не очень. Я не думаю, что вы можете помочь. Canva слишком медленная, при быстрых движениях не успеет прочитать все промежуточные точки и тогда рисует прямые линии.
Сумья_Гаутам
#11
Да Патрик. Я понимаю этот момент. Но мои точки появляются слишком далеко. Любой способ убедиться, что холст выбирает более близкие точки для рисования линии. Спасибо.
Патрик_Ф
#12
Он не будет выбирать более близкие точки, потому что не может «видеть» их при быстрых движениях. Но нужны ли вам такие быстрые движения? При обычном рисовании все нормально. Быстрые движения чешутся, а когда морщишь, форма наверное не важна 😉
ТИМАИ2
№13
Кто-нибудь упомянул, что размер адаптивный? Видимо это может помочь.
..
Patryk_F
№14
Отзывчивый — это значение по умолчанию в App Inventor. При быстрых движениях, как ответных, так и фиксированных, он создает прямые линии. Прямые линии выглядят зубчатыми только в фиксированном режиме.
ТИМАИ2
№15
Это не значит, что разработчик не изменит его на Fixed, а затем получит неожиданные результаты…
Soumya_Gautam
№16
Размер настроен на адаптивный.
Я не изменил его.
HIFI_APPS
# 17
как сказала @dora_paz
сделайте это, а также попробуйте увеличить ширину, это будет гладко
HIFI_APPS
извините, это может не работать с тем, что я опубликовал, но прочел 10 января 2021 г., 15:15
# 19
Привет, HIFI_APPS, я тоже просмотрел этот пост. Кривые шаткие и не плавные. Спасибо
Гика