Как рисовать на странице браузера
Функция рисования в браузере Microsoft Edge
Но самая крутая новая функция — это рисование, то есть способность рисовать, писать и вообще размечать веб-страницы непосредственно в браузере. Вы можете поделиться своими заметками по электронной почте или через социальные сети. Также присутствует возможность сохранить ваши художества в OneNote.
Как начать рисование
Когда в браузере вы перешли на веб-страницу и захотели сделать отметку, щелкните маленький значок, который выглядит как ручка и бумага в верхнем правом углу окна. Там их немного, найти необходимый очень просто.
Веб-страница обновится, и панель инструментов будет выглядеть поверх обычной панели инструментов. С левой стороны панели инструментов можно увидеть пять значков: перо, маркер, ластик, текст и булавка. Инструмент «Перо» выбран по умолчанию, поэтому вы можете просто начать писать, если хотите (средней толщины, светло-голубые чернила). Если вы хотите изменить цвет пера, щелкните значок пера, чтобы выбрать один из 12 цветов и трех размеров.
Чтобы использовать маркер, который позволяет выделять текст и изображения, а не рисовать поверх них, нажмите кнопку маркера. Нажмите кнопку маркера еще раз, чтобы выбрать его цвет и форму (шесть цветов, три фигуры).
Нарисуйте что-нибудь
Если вы предпочитаете ввод текста, можно использовать текстовый инструмент, чтобы комментировать веб-страницу. Для этого нажмите кнопку текстового инструмента, а затем щелкните в любом месте страницы. В этом месте появится пронумерованный штифт, а рядом с ним вы увидите текстовое поле, в котором вы можете ввести все, что хотите.
Если вы хотите убрать страницу, рекомендуем закрыть текстовое поле, нажав на пронумерованный вывод. Инструмент останется там, где он есть, но текстовое поле будет сведено к минимуму. Чтобы снова открыть текстовое поле, просто нажмите на него еще раз. Вы также можете переместить текстовое поле, нажав и перетащив пронумерованный штифт.
Чтобы удалить и вывод комментария, и текстовое поле, щелкните значок корзины в правом нижнем углу текстового поля. Одно замечание: при использовании текстового инструмента все маркеры «чернила» (перо и маркер) будут отображаться во всех текстовых полях.
Инструмент отсечения также превратит ваш курсор в перекрестие, чтобы вы могли вырезать часть страницы. Он работает аналогично инструменту Snipping Tool — щелкните значок инструмента, и страница исчезнет. Как только у вас есть выделенный раздел, вы увидите маленький значок в правом нижнем углу — щелкните его, чтобы скопировать участок (вы можете вставить его в другую программу (к примеру, Microsoft Paint) для того, чтобы сохранить.
Поэтапное удаление
В Windows 10 Pro Insider Preview Build 10158, наконец, заработал ластик. Нажмите кнопку инструмента «Ластик», чтобы предоставить вашему курсору возможность стереть. Удерживайте и перемещайте курсор над любыми чернилами (перо или маркер), чтобы стереть их с экрана. Что интересно, так это то, что вы не можете стирать штрихи, просто нажимая на них — вы должны удерживать кнопку мыши и перемещать курсор по ним в режиме «стирания». Это не очень удобно, так как если вы случайно наведёте мышь на два разных штриха, оба штриха будут стерты безвозвратно.
Чтобы стереть всю страницу, нажмите кнопку инструмента «Ластик» во второй раз. Появится меню с вариантом: сбросить все чернила.
Поделиться или сохранить
С правой стороны панели инструментов можно увидеть значок сохранения и значок общего доступа. Чтобы сохранить веб-страницу с вашими аннотациями, щелкните значок «Сохранить».
Появится меню с различными вариантами. Можно отправить свое творение в OneNote или добавить его в избранное.
Чтобы поделиться своими художествами, щелкните значок общей папки, чтобы открыть боковую панель совместного доступа Windows 10. В верхней части боковой панели вы увидите имя вашего файла. Нажмите на него, чтобы выбрать, предоставлять ли общий доступ к вашему файлу в виде ссылки или скриншота. Под ним вы увидите список приложений и программ, которые вы можете использовать для совместного использования вашего файла.
Разработчики постоянно вносят корректировки в работу системы, поэтому заглядывайте чаще в наш путеводитель по Windows 10!
Как рисовать в браузере красивые вещи
Писать красивый код — это удовольствие, но очень трудно поделиться этим удовольствием с другими программистами, не говоря уже о непрограммистах. В свободное время, которое остается после работы и семейных обязанностей, я экспериментирую с идеей программной поэмы, используя графические элементы для рисования в браузере.
Это не должна быть незавершенная идея, но законченный фрагмент, который доставляет удовольствие от просмотра. Поэма не является инструментом, ее задача — вызывать эмоции.
Для собственного удовольствия я читал книги по математике, вычислительным алгоритмам, физике и биологии. Очень быстро я понял, что, если просто носиться с идеей, это скоро надоест людям.
Но я могу взять некоторые из тех идей, которые я нахожу увлекательными, и представить их визуально, и тогда люди проникаются ощущением чуда, даже если они не понимают теорию, которая лежит в основе визуального представления, и концепции, которые приводят его в действие.
Вам не нужна какая-то сложная философия или математика, чтобы написать программную поэму, только желание увидеть что-то живое и яркое на экране.
Основная сложность при создании поэмы — все должно быть просто и легко. Не тратьте три месяца на создание одного действительно классного демо. Вместо этого создайте 10 поэм, которые развивают идею. Напишите экспериментальный код, который будет впечатляющим, захватывающим, и не бойтесь потерпеть неудачу.
Введение по холстам
Любое возникающее событие относится ко всему элементу в целом, а не какому-нибудь отдельному элементу, нарисованному на холсте, как в обычных элементах изображений. Вот простой пример холста:
С ним довольно просто начать работу. Единственное, что может быть немного сложным, это контекст, для которого перед запуском непосредственно рисования должны быть заданы такие настройки, как стили заполнения, ширина линии, шрифт и стили штрихов.
Очень легко забыть, что эти настройки должны быть обновлены или восстановлены, и тогда вы получите неожиданные результаты.
Приведение элементов в движение
В первом примере прямоугольник просто пробегается один раз через весь экран и остается в виде статического изображения на холсте. Это неплохо, но анимация действительно приносит удовольствие, когда картинка обновляется с частотой 60 кадров в секунду.
( Замечание относительно поддержки браузерами: Есть несколько простых polyfills, если вам нужно обеспечить поддержку в старых браузерах ):
Рисование с помощью математики
Теперь будьте внимательны, мы говорили о программировании и рисовании на экране, поэтому я перехожу к математике. Математика — это то, что создает магию, которая потом отображается на экране. Если честно, я всегда любил математику ( а вот многие художники нет ).
Несмотря на эту любовь, я был несколько разочарован тем, как ее преподавали в школе. Все это было очень формально, что, конечно, отлично подходит математикам, но в этом не хватало волнения, глубокого исследования и прагматизма, что могло бы помочь в изучении некоторых очень простых концепций. Однако программисты игнорируют абстрактные доказательства и сосредотачиваются на интересных приложениях.
Позвольте мне отнять несколько секунд вашего времени, чтобы пояснить, как работает функция синуса. Это будет полезно, в плане того, чтобы задуматься, как с помощью математических функций можно создавать движение. Приведенные ниже миниатюры являются ссылками на интерактивный график функции синуса.
Теперь я перепишу формулу из предыдущего примера кода и создам другую версию, которую будет легче читать:
Если вы хотите поэкспериментировать с тем кодом, что я уже показал, я бы советовал вам попробовать добавить перемещение вдоль оси у. Попробуйте изменить значения в функции синуса или возьмите другую тригонометрическую функцию, чтобы поэкспериментировать с ней и посмотреть, что происходит.
Ввод данных пользователем
По ходу рассмотрения движения с помощью математики, хочу воспользоваться моментом и прикинуть, что вы можете сделать с помощью различных устройств ввода для перемещения прямоугольника по странице. Браузеры поддерживают все возможные варианты ввода, в том числе микрофон, веб-камеру, мышь, клавиатуру и геймпад.
Всемогущая Dot
В этом примере все уже немного сложнее, потому что это взаимодействия с объектами, но оно того стоит. Посмотрите пример кода, в котором вы увидите новый объект Scene, который управляет рисованием на холсте.
Наш новый класс Dot будет работать с этим объектом, чтобы получить доступ к переменным, которые ему будут нужны, например, к контексту холста:
Все остальные части кода будут установлены в прототипе объекта Dot таким образом, чтобы каждый новый создаваемый Dot имел доступ к этим методам. Ниже я разберу все функции одну за другой:
Я обновляю код рисования из обновленного кода. Таким образом, значительно проще поддерживать код и увеличивать производительность объекта. Точно также в шаблоне проектирования MVC выделяется управление и логика представления. Переменная dt начинает изменяться каждую миллисекунду с момента последнего вызова обновлений.
Эта функция имеет немного запутанную структуру, но она удобна для визуализации. Она действительно потребляет много памяти. Переменная moveDistance устанавливается один раз и может повторно использоваться в любое время при вызове функции.
Этот вектор используется только, чтобы помочь вычислить новое положение, но не используется за пределами функции. Это первый элемент векторной математики, который мы использовали.
Сейчас вектор направления умножается на каждое изменение во времени, а затем добавляется к позиции. В конце концов, мы производим модульные действия, чтобы сохранить dot в пределах screen:
Теперь я добавляю новый Dot через вызов this.dot = new Dot(x, y, this) в конструкторе scene, а затем в методе обновления основного пространства действия добавляю this.dot.update( dt ) и получаю масштабирование точки по всему экрану. ( Чтобы увидеть весь код в контексте, посмотрите исходный код к статье ).
Удобнее, если мы соберем этот функционал в отдельный объект, чтобы код был проще и чище, так как сам процесс у нас все больше усложняется:
Canvas Chrome — рисуем на странице браузера Google Chrome, Firefox и не только
Современные графические редакторы давно ушли от старых десктопных версий и запустили собственные онлайн-сервисы и разные мобильные приложения. Так, например, недавно мы рассматривали более 10-ти полноценных и самодостаточных программ дизайна на Андроид, есть аналогичный софт под iOS, можно вспомнить векторный редактор Vectr и многое другое.
Корпорация Google решила не отставать от подобных тенденций и запустила свое онлайн веб-приложение для рисования на страницах браузера — Canvas Chrome. Не смотря на название, оно доступно не только пользователям Хрома, но также будет работать в Firefox и любом браузере с поддержкой WebAssembly. Кроме того, найдете его в операционной системе Chrome OS для Chromebook и даже сможете открыть с планшета/смартфона.
Здесь 5 инструментов для рисования:
При двойном щелчке по ним появляется выбор размера кисти и ее прозрачности. Вполне вероятно, что на тачскрин экранах и с помощью стилуса учитывается степень нажатия (но в описании это не указано).
Справа сверху расположена мини-менюшка с опциями отправки фидбека разработчикам сервиса и экспорта (сохранения) картинки. Скачиваются изображения в формате PNG. В противоположном углу слева увидите иконку домика, при нажатии на которую попадете на общую страницу Canvas Chrome со списком всех ваших набросков.
Здесь вы можете начать рисовать в браузере с нуля на пустом поле (New drawing) или предварительно импортировать готовую картинку (New from image). Также для каждого объекта есть выпадающий список функций: переименовать, экспорт и удалить.
В общем, как вы и сами видите, это достаточно простой графический редактор — он больше подходит для разных скетчей, зарисовок, пригодиться дабы учиться рисовать с нуля выполняя разные несложные упражнения и т.д. По функциональности Canvas Chrome не дотягивает даже до десктопного Paint или бесплатных онлайн аналогов Фотошопа GIMP, Pixlr. Но у него другие фишки:
Судя по всему, это один из первых релизов веб-приложения, поэтому время от времени могут случаться небольшие баги, например, не совсем понятна работа с размерами импортируемых картинок + иногда глючит кнопка отмены действия. Однако, учитывая именитого разработчика, все эти косяки графического редактора Google в скором времени должны исправить. Также неплохо было бы добавить и другие полезные функции: кисти, формы, собственные палитры и т.п.
А вы уже пробовали рисовать в браузере с помощью Canvas Chrome? — делитель впечатлениями ниже.
Рисование встроенными средствами HTML5 (Canvas)
До появления canvas для вставки анимации могли спользоваться gif-изображения, flash-анимация или, основанные на скриптах или других подключаемых модулях, другие решения (в частности Silverlight, Java Applets, ActiveX и другие). Однако, каждое из этих решений имеет ряд недостатков. Например, плохое качество анимации gif-изображений, большой размер загружаемых модулей Java, несоответствие версий Flash проигрывателя, ActiveX работает исключительно в Internet Explorer и многое другое. Но главным фактором появления анимации и графики на основе canvas является высокий рост мобильного сегмента Интернет, особенно устройств типа iPhone, iPod touch, iPad, а также различных устройств под управлением Android. Установить плагин на них нет возможности, а i-устройства не поддерживают Flash (а начиная с версии 4.0 его также не поддерживают устройства под управлением Android).
Элемент ‹canvas›
Элемент ‹canvas› создает контекст отрисовки, на котором в будущем можно создавать и манипулировать объектами javascript. Другими словами, ‹canvas› представляет собой прямоугольную область, в которой с помощью javascript можно «рисовать».
На сегодняшний день стандарт полностью описывает работу двумерных контекстов (для плоской графики, 2D). Однако, сейчас проводится работа по разработке стандарта WebGL, для поддержки элементом ‹canvas› трехмерных контекстов (примеры работ можно посмотреть в Лаборатории Chrome).
Для размещения элемента на странице HTML достаточно указать:
‹canvas width=600 height=250› ‹/canvas›
После помещения на страницу элементом ‹canvas› можно манипулировать как угодно: помещать на него текст, рисовать графические элементы и линии, выполнять заливку, добавлять анимацию. Все это делается при помощи команд javascript. Чтобы использовать холст программным путем необходимо прежде всего получить доступ к его контексту. После этого выполняются все необходимые действия с контекстом и только тогда результат подтверждается и выводится на холст. То есть, сначала изображение создается программно, а потом результат выводится визуально.
Так как не все браузеры поддерживают HTML5, то на данное время воспользоваться ‹canvas› можно только в следующих браузерах (по информации caniuse.com):
В случае, если к ‹canvas› обратились из браузера, который не поддерживает этот элемент, то пользователь увидит содержимое, помещенное внутри этого тега (такое содержимое называют аварийным), например:
‹canvas› Your browser is not support HTML5 Canvas! Please update your browser version! ‹/canvas›
Рисование на холсте
В первой строке мы получам сам холст, а во второй с помощью вызова единственного метода объекта холста getContext() получаем контекст этого холста. Параметр 2D указывает на то, что получаемый нами контекст будет создавать плоское изображение (экземпляр объекта CanvasRenderingContext2D ).
Теперь можно приступить к рисованию. Следует помнить, что для рисования с помощью ‹canvas› потребуется понимание системы координат, где каждой точкой является пиксель на экране, а началом координат является верхний левый угол холста. Создадим новый холст, зададим для него атрибут id=canvas и добавим к нему рабочку, чтобы было удобнее следить за результатом:
‹canvas width=150 height=150 style=»border:1px solid #ccc;» ‹/canvas›
Результат вы можете видеть ниже:
Прямоугольники
Для отображения прямоугольных фигур используются следующие методы:
Изменим функцию CreateImage() для демонстрации рисования двух прямоугольников:
Если в код функции CreateImage() добавить строку
То получится следующий результат:
Работа с цветом и толщиной линий
Работа с пером
Рисование более сложных объектов производится с помощью виртуального «пера». Для работы с ним существует ряд методов. Прежде всего нужно понять разницу между двумя основными методами:
Результат работы скрипта представлен на нижнем рисунке
Рисование дуг и кривых
построит следующую дугу:
И в результате получится окружность:
Результат отображен на рисунке внизу:
Вставка текста
Существует два метода и несколько свойств для вывода и форматирования текста. Для вывода текста используют следующие методы:
Для форматирования текста есть несколько различный свойств:
Пример вывода текста:
Размещение на холсте внешних изображений
Кроме рисования графических элементов на холсте можно разместить уже готовое изображение в любом из стандартных форматов. Для этого необходимо создать экземпляр объекта Image. Пример использования:
Как писать и рисовать на веб-страницах в браузере Microsoft Edge
Microsoft Edge — единственный браузер, который позволяет рисовать на веб-страницах, стирать, добавлять заметки, выделять текст и другие элементы, а также копировать любую часть веб-страницы.
Все свои пометки можно сохранить и поделиться ими с друзьями всеми стандартными способами. Делайте заметки при подготовке к урокам, выделяйте текст во время поиска важной информации или дорисовывайте усы знаменитостям, поскольку Интернет становится вашим полотном.
Запустите браузер Microsoft Edge, зайдите на нужную страницу в Интернете.
Нажмите на панели кнопку Создать веб-заметку (в правом верхнем углу), чтобы дополнить текущую страницу.
Появится новое меню фиолетового цвета на котором присутствуют следующие инструменты.
1) Перо
2) Маркер
3) Ластик
4) Добавить заметку
5) Обрезать
6) Сохранить веб-заметку
7) Поделиться веб-заметкой
8) Выход
Используйте инструмент Перо, чтобы рисовать на экране. Можно выбрать цвет и размер пера.
Используйте инструмент Маркер для выделения текста или других элементов на экране. Также можно выбрать цвет и размер маркера.
Инструмент Ластик позволяет удалить ваши пометки с экрана. Выберите инструмент Ластик, нажмите на любую пометку и она исчезнет. Есть функция позволяющая очистить весь рукописный ввод.
С помощью инструмента Добавить заметку можно оставить любой комментарий к записи или изображению в любом месте веб-страницы.
Инструмент Обрезать, позволяет скопировать любую часть страницы в буфер обмена, а затем вставить в любой документ (например word), презентацию или просто сделать изображение и использовать его в своих целях.
С помощью кнопки Сохранить веб-заметку можно сохранить ваше творение в OneNote, Избранное или Список чтения в Microsoft Edge. В любое время вы можете открыть веб-заметку, внести в нее дополнения или же удалить.
Вы также можете поделиться своей веб-заметкой, отправив ее по почте, разместить в социальной сети, в OneNote или отправить ее на печать с помощью кнопки Поделиться веб-заметкой.
Кнопка Выход позволяет выйти из режима редактирования.
Делать заметки и рисовать на веб-страницах можно и с использованием стилуса.
С помощью Microsoft Edge действительно просто и удобно писать и рисовать на веб-страницах. И помните, что браузер Microsoft Edge доступен исключительно для пользователей Windows 10.