Как сделать кнопку в canvas
Обновлено: 07.07.2024
В HTML5 есть тег canvas, который создаёт поле для рисования. На нём можно рисовать с помощью скриптов JavaScript. Разберём как это работает.
Подготовка поля для рисования
Сначала необходимо на странице прописать тег: Теперь с помощью JavaScript надо обратиться к этому полю. Сначала получим ссылку на него через getElementById а затем создадим объект, в котором будет находиться так называемый "контекст", через методы которого будем рисовать: Теперь обращаясь к методам в объекте ctx можно рисовать различные фигуры в пределах области canvas. Попробуем сделать это.
Рисование линий
- Первая команда beginPath говорит о том, что надо приготовиться к рисованию.
- Вторая команда moveTo(50, 50) говорит о том, куда JavaScript должен поставить свой карандаш, откуда начнётся рисование. В скобках задаётся горизонтальная и вертикальная координата в пикселях (от левого верхнего края canvas). В нашем случае это точка находится на расстоянии 100 пикселей от верхнего и левого края.
- Третья команда lineTo(150, 50) говорит о том, куда JavaScript должен тянуть свой карандаш. В скобках задаётся горизонтальная и вертикальная координата в пикселях. В нашем случае это точка находится на расстоянии 100 пикселей от верхнего края и 150 от левого. То есть получится горизонтальная линия по центру canvas.
- Последняя четвёртая команда stroke говорит, что надо закончить рисование.
Заливка рисунка
Попробуем разукрасить полученный квадрат не чёрным цветом, а синим. Для этого надо использовать метод fill. Точно так же как и изменение цвета/толщины линий, этот метод должен быть вызван до вызова метода stroke (который стоит в последней строчке примера). Не обязательно, чтобы фигура была закончена и "закрыта". То есть можно не ставить closePath, а нарисовать три стороны и применить закрашивание fill, тогда всё равно закрасится именно нужная область: Чтобы изменить цвет заливки, используем метод fillStyle, которому передадим нужный цвет в обычном CSS формате (название цвета, HEX или RGB): Получится такой синий квадрат:
Canvas HTML5 уже давно поддерживается всеми популярными браузерами. Вы можете использовать его для рисования графики в браузере с помощью JavaScript. Графика, которая может быть создана на canvas, варьируется от простых линий и фигур до фотокомпозиций и анимаций.
В этом курсе вы узнаете об очень полезной canvas библиотеке под названием Konva. Вы можете использовать Konva для рисования различных фигур на canvas или на stage. Помимо прочего, библиотека позволяет масштабировать, поворачивать и анимировать все эти фигуры и присоединять к ним слушателей событий.
В этом уроке основное внимание будет уделено фундаментальным концепциям библиотеки, а также краткий обзор различных функций библиотеки. После этого мы перейдем к более конкретным и сложным темам. Библиотека впервые появилась как форк популярной библиотеки KineticJS.
Stage, Layers, и Shapes
Все, что вы рисуете с Konva, потребует от вас создания stage с использованием Konva.Stage . Вы можете указать элемент контейнера stage, используя атрибут container . Каждый stage также требует значения ширины и высоты, которое может быть задано с использованием атрибутов width и height соответственно.
Один stage может содержать несколько слоев (layers). Каждый из этих слоев (layers) будет иметь два рендерера. Рендерер сцены используется для рисования всех shapes, которые видны вам на stage. Инструмент рендеринга графа скрыт от пользователей. Он используется для высокопроизводительного обнаружения событий.
Один слой может содержать несколько фигур, группы разных фигур или группу групп. Сцена (stage), слои (layers), группы и фигуры (shapes) действуют как виртуальные узлы, которые могут быть индивидуально оформлены и преобразованы.
Рисование фигур (Shapes) с использованием Konva
Прежде чем создавать какие-либо формы, нам нужно включить библиотеку в ваш проект. Существует несколько способов сделать это. Если вы используете менеджеров пакетов, вы можете запускать следующие команды.
Вы также можете напрямую ссылаться на минифицированную версию библиотеки, размещенную на cdnjs и jsDelivr.
После того, как вы установили библиотеку, вы можете использовать следующий код для создания прямоугольных фигур на холсте (canvas).
Рисование чего-либо на холсте (canvas) - это пятиступенчатый процесс. Во-первых, вам нужно создать экземпляр сцены (stage), на которой будут рисоваться различные фигуры с помощью Konva.Stage . Для этого вам нужно указать ширину и высоту сцены (stage), а также id элемента контейнера, который будет содержать сцену (stage). В нашем случае прямоугольники рисуются внутри div , id которого example .
На следующем шаге вам нужно создать все слои (layers), которые вы хотите отобразить на сцене (stage). В этом примере мы создаем только один слой (layer), но вы можете создать несколько слоев (layers) и добавить их все в один stage. Различные слои могут быть очень полезны, когда ваш фон состоит из статических, а также движущихся элементов. В таких случаях вы можете добавлять статические элементы на один слой и перемещать элементы на другом. Поскольку вам не придется обновлять статический фон после каждого перерисовывания, это может значительно повысить производительность.
После создания слоев (layers) вы можете инициализировать различные фигуры (shapes), такие как прямоугольники, эллипсы, звезды и кольца, которые вы хотите показать на слоях. Наконец, вы должны добавить фигуры к слоям и слои к сцене (stage).
Создание групп (Groups) в Konva
Группировка различных форм вместе - хорошая идея, когда вы хотите управлять всеми фигурами как единым целым. Например, предположим, что вы создали автомобиль, используя два круга для колес и два прямоугольных блока для тела. Если вы хотите переместить этот автомобиль вперед, не создавая группу, вам придется индивидуально передвигать все фигуры по одной. Более эффективным методом является просто добавить круги и прямоугольники в группу и передвинуть их все сразу.
Чтобы добавить любую фигуру в группу, вам нужно использовать метод add() , как и при добавлении фигур в слой. Вы также можете добавить группу в другую группу для создания более сложных объектов. Например, вы можете создать человека внутри автомобиля как одну группу и добавить этого человека в группу, представляющую автомобиль.
В следующем примере я все упростил и создал группу carA . После этого я могу вращать и масштабировать весь автомобиль сразу.
Слои в Konva
Вы уже знаете о слоях (Layers) в Konva. Слоение (Layering) - это нечто другое. По умолчанию все фигуры, добавляемые к слою, рисуются в том порядке, в котором они были добавлены. Это означает, что фигуры, добавленные в слой после всех остальных, будут нарисованы поверх других фигур.
Konva позволяет вам управлять порядком, в котором фигуры рисуются с использованием различных методов наложения слоев, таких как moveToTop() , moveToBottom() , moveUp() , moveDown() , и zIndex() .
Метод moveToTop() будет рисовать данную фигуру над всеми другими фигурами, которые были добавлены к тому же слою. Фигуры, нарисованные на слое, добавленном на сцену Konva после слоя нашей особой фигуры, будут по-прежнему оставаться выше нашей фигуры. Вот почему круг индиго в следующем примере остается ниже светло-зеленого круга даже после вызова moveToTop() .
Метод moveToBottom() будет рисовать данную фигуру ниже всех других фигур, которые были добавлены на один и тот же слой. Подобно moveToTop() , фигуры будут перемещаться на дно их собственных слоев, а не на слои ниже них.
Методы moveUp() и moveDown() перемещают фигуру, на которой они вызваны, на одну позицию выше или ниже их текущей позиции в том же слое. Метод index() используется для задания индекса фигуры внутри родительского слоя. В отличие от CSS, вы не можете установить произвольное значение zIndex в Konva. Для слоя с 10 фигурами значение zIndex может быть только между 0 и 9 (включительно).
В приведенном выше примере, вы можете увидеть, что при нажатии только на кнопку "Indigo Top", индиго круг не рисуется выше всех остальных, в то время как нажатие "Индиго выше всех остальных" будет позиционировать его в верхней части. Это происходит потому, что последняя кнопка также перемещает слой, содержащий круг индиго в верхней части.
Поскольку круги можно перетаскивать, было бы неплохо перетащить их друг на друга и посмотреть, как положение круга индиго меняется при нажатии разных кнопок.
Заключительные мысли
В этом уроке мы рассмотрели некоторые фундаментальные понятия, связанные с Konva. Теперь вы должны иметь возможность рисовать некоторые общие фигуры на холсте (canvas) и перемещать их как группу. Этот урок также показал вам, как перемещать определенную форму вверх или вниз в случае перекрытия.
JavaScript стал одним из де-факто языков работы в Интернете. Он не лишен сложностей в изучении, и есть множество фреймворков и библиотек, которые вы можете изучить. Если вы ищете дополнительные ресурсы для изучения или использования в своей работе, посмотрите, что есть на Envato Market.
Если у вас есть какие-либо вопросы, связанные с этим учебным курсом, не стесняйтесь, пишите мне в комментариях. В следующем уроке вы узнаете, как рисовать основные фигуры в Konva.
Я новичок в Javascript, и я нахожусь в процессе создания веб-проекта (HTML) С моими основными знаниями мне удалось создать форму и нарисовать на ней прямоугольник.
Это код для моего прямоугольника:
Мне известно, что вам нужно найти координаты x, y и позицию мыши, чтобы щелкнуть в области прямоугольника. Но я действительно застрял в этой точке. Это может быть очень просто и логично, но мы все должны были пройти этот этап.
Вы думали в правильном направлении.
Вы можете решить это несколько способов, как использовать кнопку html, предложенную в комментариях.
Но если вам нужно обработать события click внутри вашего холста, вы можете сделать что-то вроде этого:
Добавить обработчик кликов на холст и когда указатель мыши находится внутри вашего ограничивающего прямоугольника, вы можете запустить функцию щелчка:
jsFiddle
Path2d может представлять интерес, хотя он экспериментальный:
В принципе, вы сделали бы весь свой чертеж в пути и использовали метод .isPointInPath для проверки. Для прямоугольника, который вы описываете, вы можете сделать эту математику довольно просто, но слава этого - у вас может быть установлен сложный путь, и он сделает обнаружение столкновения для вас:
Первое, что мы собираемся сделать, это добавить элемент canvas на страницу и внести некоторые изменения, чтобы с ним было проще работать. Но прежде всего нам нужна пустая HTML-страница , с которой мы будем работать дальше. Создайте новый документ и добавьте в него следующие строки разметки:
После того, как мы задали разметку пустого HTML-документа , пришло время для главного события, которое вы, наверное, с нетерпением ждете последние 30 секунд: продемонстрируем использования в JavaScript canvas на примере.
Добавление элемента Canvas
Элемент canvas определяется HTML-тегом с соответствующим названием — canvas , и он ведет себя, как любой другой элемент HTML . Добавить его можно с помощью следующего парного тега:
Однако праздновать еще слишком рано. Просмотрев страницу сейчас, вы увидите ослепительно пустой экран. Причина заключается в том, что сам по себе элемент canvas не содержит ничего интересного. Это просто экран, на который с помощью JavaScript выводятся пиксели.
Визуализация холста
Чтобы визуализировать наш элемент canvas , давайте укажем некоторые стили CSS , чтобы добавить ему рамку. Добавьте внутри раздела head блок CSS , как показано ниже:
Продолжим нашу работу с canvas в JavaScript . После того, как вы добавили этот код CSS , просмотрите страницу. Если все работает как надо, страница будет выглядеть следующим образом:
Изменение размеров элемента Canvas
По умолчанию элементы canvas имеют 300 пикселей в ширину и 150 пикселей в высоту. Но мы хотим чего-то большего. Например, 550 на 350 пикселей. Наверное, вы подумаете, что нужно добавить свойства ширины и высоты в код CSS . Как выясняется, вы не можете сделать это и получить желаемый результат.
Чтобы изменить размеры холста, добавьте атрибуты width и height непосредственно в HTML-код элемента canvas :
Вы можете использовать CSS для установки размера, но при одном условии: нужно сохранить пропорции элемента canvas . Иначе установка размеров через HTML является единственным способом получить нужный размер, чтобы все пиксели на холсте не выглядели странно и растянуто.
Как вы поймете позже, в работе с элементом canvas JavaScript есть некоторые причуды, к которым мы должны относиться терпеливо.
Добавление идентификатора для элемента canvas
Зададим для элемента canvas значение идентификатора, чтобы можно было ссылаться на него в JavaScript . В тег элемента добавьте атрибут id и задайте для него значение myCanvas :
Полная разметка, которая должна у вас быть на данный момент, выглядит следующим образом:
На текущий момент я не советовал бы просматривать в браузере то, что у нас получилось: вы опять увидите пустой экран. Однако сейчас мы это изменим!
Создание контента
В предыдущем разделе мы определили в разметке элемент для рисования на canvas в JavaScript . Но это всего лишь незначительная часть работы с холстом. В этом разделе мы напишем код JavaScript , который будет взаимодействовать с элементом canvas , чтобы получить пиксели для вывода на экран.
Добавление тегов script
Перед тем, как написать код, нам нужен тег script , в котором разместится созданный нами JavaScript . Вы можете использовать внешний файл JavaScript или сохранить весь код в том же документе. Для простоты я помещу весь код в разметку страницы, и это будет выглядеть следующим образом:
Теперь мы можем написать код, который будет взаимодействовать с canvas JavaScript .
Доступ к элементу canvas
При работе с холстом почти каждый раз первая строка JavaScript будет включать в себя код для получения ссылки на элемент canvas в HTML . Чтобы получить ссылку, в теге script добавьте следующую строку:
Все, что мы делаем здесь, это инициализируем переменную canvas с привязкой к нашему элементу myCanvas , который мы определили ранее в HTML . Мы получаем ссылку на myCanvas с помощью функции querySelector . Она является более эффективным способом поиска элементов в HTML по сравнению со старыми функциями getElementById и getElementsByClass , с которыми вы, возможно, уже знакомы.
Получение контекста рендеринга
Чтобы рисовать в элементе canvas , сначала нужно указать контекст рендеринга, который мы хотим использовать. Это делается через вызов метода getContext для объекта canvas и передачу в него в качестве аргумента контекста рендеринга 2D , который нам нужен:
Переменная context теперь содержит ссылку на контекст рендеринга элемента canvas 2d ,. Если говорить проще, подключив контекст рендеринга, мы получили канал, через который можно вызывать команды для получения пикселей, которые будут выводиться внутри холста! То есть для рисования.
Вызов команд
Теперь остается применить различные для canvas методы JavaScript , чтобы вывести на экран то, что нам нужно. Я не буду загружать вас теорией о том, что делают различные команды рисования и как использовать их. Вместо этого я сначала приведу вам код примера, чтобы вы увидели canvas в действии.
Добавьте следующие строки кода:
После того, как сделаете это, просмотрите HTML-страницу в браузере. Если все прошло успешно, на этот раз вы увидите кое-что реальное: толстую диагональную линию синего цвета:
Весь код, который вы только что вставили, отвечает за вывод этой линии. Не переживайте, если вы не полностью поймете смысл каждой строки кода. Просто обратите внимание на то, что мы как будто перемещаем виртуальный карандаш, следуя указанным начальным и конечным координатам:
Также у нас есть код, который, задает для canvas JavaScript толщину и цвет выводимой линии:
Заключение
В этой статье мы создали базовый шаблон, который в дальнейшем будет использовать весь связанный с холстом контент. У нас в HTML-документе теперь есть элемент canvas с дополнительными встроенными стилями CSS и атрибутами HTML . После этого мы написали JavaScript , в котором сослались на элемент canvas, получили доступ к контексту рендеринга, а затем вызвали команды, необходимые для вывода пикселей.
Читайте также: