Рисование в браузере - IT Справочник
Llscompany.ru

IT Справочник
17 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Рисование в браузере

Обзор расширений для популярных браузеров

Представляем вашему вниманию краткий обзор интересных дополнений для Firefox, Chrome и Opera, которые привлекли наше внимание на прошедшей неделе.

В этом выпуске вы узнаете о полезном расширении для любителей почитать в Firefox и послушать музыку в Google Chrome. А еще у нас есть удобнейшее поисковое дополнение для браузера Opera.

Firefox

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

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

Chrome

Это отличное расширение для всех любителей онлайнового радио. С его помощью вы можете слушать свои избранные станции с помощью удобного плеера, появляющегося во всплывающем окне при нажатии кнопки расширения. Добавление станций возможно как из встроенного каталога, так и из таких популярных сервисов, как Shoutcast или Digitally Imported, а также вручную.

В браузере Firefox имеется отличная функция — «живые закладки», которые представляют собой простейший способ следить за RSS обновлениями нужных сайтов. Расширение Foxish Live RSS добавляет эту возможность в браузер Chrome. После его установки на вашей панели избранного появляется специальная папка, в которую вы можете добавлять RSS подписки. Щелчок по этой папке позволяет просмотреть заголовки последних новостей, которые обновляются через заданный вами промежуток времени.

Opera

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

На сегодня это всё. Продолжим через неделю.

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

Онлайн рисование на компьютере: обзор уникальных сервисов

Доброго времени суток!

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

Ну а раз так, то сегодня решил привести несколько сервисов, позволяющих в онлайн режиме создавать интересные рисунки. Причем, в своем обзоре я хочу выделить не просто сайты аналоги классического Paint (который есть во всех Windows), а с уникальными вещами.

Например, речь идет о нейронных алгоритмах: когда вы делаете набросок — а сайт автоматически рисует картину в цвете. Как вам? Или когда вы можете нарисовать свою картину, выставить ее на всеобщее обозрение и получать комментарии и оценки от других пользователей (в свою очередь, оценивать их творения). Думаю, многим должно прийтись по душе?!

Где можно рисовать онлайн в браузере

1) Pix2pix

Моя картина: кот.

Интереснейший сервис, позволяющий с помощью нескольких набросков получить довольно-таки реалистичное изображение. Например, вы можете от руки нарисовать котика, чей-то портрет, обувь, сумки, здания и пр. Для каждого элемента — есть свое окно для рисования (пожалуй, немного неудобно лишь то, что сервис выполнен на английском). Моя картинка представлена чуть выше: для 1 мин. по-моему вполне неплохо.

А как вам такой красавец?

Pix2pix был разработан на основе 100 000 фото, которые были предоставлены участниками проекта и обработаны нейронной сетью. Представьте, если уже сейчас по таким простым эскизам — можно получать вполне неплохие вещи, то, что будет дальше? Например, на основе фоторобота — можно будет получать очень реалистическое фото человека! Мы на пороге больших изменений, которые готовит нам сфера IT.

2) «Дети в Интернете»

OCOMP — трехмерная картинка с лого сайта

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

Несколько инструментов для примера

Например, у них есть 3D конструктор, есть различные варианты «магических» кистей (это когда можно рисовать кистью сразу разными цветами), рисование сразу одновременно с художниками и т.д. Очень много интересных вариантов создания рисунка, однозначно рекомендую к ознакомлению.

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

3) Рисуй с нами!

Просто отличный многофункциональный сервис, который придется по душе всем, кому нравится рисовать. Посудите сами:

  1. есть удобный инструмент (полотно) для рисования: в нем доступным десятки кистей, карандашей и пр. инвентаря для создания качественных и сложных рисунков;
  2. есть коллекция рисунков: все их оценивают другие пользователи, комментируют, задают вопросы. Картинок очень много, они разных жанров, цветовой гаммы, нарисованы с использованием разных методик и инструментов;
  3. на сайте присутствует раздел заказов (т.е. можете предложить тему для рисунка или просто заказать для себя что-нибудь);
  4. есть раздел «Дуэль» — это для тех, кто уже немного научился рисовать и хочет попробовать себя против другого живого человека;
  5. есть очень любопытная функция: можно просмотреть как был нарисован рисунок (доступно не для всех картинок);
  6. на сайте очень много людей, интересующихся рисованием (есть отдельный раздел, где можно просмотреть список пользователей). Можно найти друзей и единомышленников по интересующему вас направлению в живописи.
Читать еще:  Как очистить историю браузера на ноутбуке

Высоко оцененные картинки

4) Рисовалка Tuteta.ru

Главное окно сайта

Весьма неплохой сервис для рисования. Есть два вида графических редактора: простой (для начинающих), и второй для профессионалов. Для начала работы с сервисом — необходима регистрация.

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

На сайте иногда проводятся акции и конкурсы. Есть смысл поучаствовать!

5) Roundraw

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

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

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

6) LONETI

Loneti — пример онлайн редактора

LONETI — это не только рисовалка, но и еще социальная сеть для художников и творческих людей.

Основные функции сервиса:

  1. удобный и качественный инструмент для онлайн рисования (см. небольшой пример выше);
  2. наличие чата и конференций для более тесного общения с интересуемым вас кругом людей (творить вместе всегда интересней, да и учиться проще);
  3. есть многопользовательский режим рисования (т.е. можно творить сразу в несколько рук);
  4. можно нарисовать уникальные смайлы, аваторки и пр.;
  5. на сайте присутствует раздел популярных рисунков: в нем выкладывают свои работы сотни людей. К каждой картинке можно посмотреть оценки и критику других людей (интересно и забавно!).

За рекомендации интересных сервисов для рисования — заранее большое мерси!

Web Paint

автор: webpaint

Необходим браузер Opera.

Web Paint provides the following easy to use drawing tools that let you draw shapes, lines, and add text to live web pages and take screenshot:

Pencil tool — draw a custom line with the selected line width and color.
Eyedropper tool — pick a color from the web page or your drawings and use it for drawing.
Text tool — insert text into the web page with the selected color and transparency.
Line tool — draw a straight line with the selected line width, transparency and color.
Quadratic curve — draw a quadratic curve with the selected line width, transparency and color.
Bezier curve — draw a bezier curve with the selected line width, transparency and color.
Polygon tool — draw a polygon with the selected line width, transparency and color.
Ellipse tool — draw an ellipse or a circle with the selected line width, transparency and color.
Color picker — select a color for the text and line.
Transparency slider — select a transparency for the text and line. (Drag the slider to the left to decrease the value and to the right to increase the value)
Line width slider — select a line width. (Drag the slider to the left to decrease the value and to the right to increase the value)
Rectangle tool — draw a rectangle with the selected line width, transparency and color.
Cursor tool — interact with the web page.
Eraser tool — erase part of your drawings.
Screenshot tool — take a screenshot of the current web page with your drawings.
Exit button — clear your drawings and disable the tools.

Please click the extension icon in the upper right of your browser to enable the tools

Снимки

О расширении

Похожие

Youtube List

Создает список ссылок всех видео на выбранном канале Youtube!

Оценка: Всего оценок: 6

Enhancer for YouTube

Широчайший функционал для улучшения просмотра видео на YouTube™.

Оценка: Всего оценок: 1119

Evernote Web Clipper

Используйте расширение Evernote, чтобы сохранять интересные материалы из Интернета прямо в свой аккаунт Evernote.

Оценка: Всего оценок: 816

Bear Writer

Send to Bear.app snippets, url or entire web pages

Оценка: Всего оценок: 3

Turn Off the Lights

Вся страница станет тёмной и Вы сможете смотреть видео, как в кинотеатре. Работает как для YouTube™, так и в других случаях.

Рисование встроенными средствами HTML5 (Canvas)

Одной из интересных возможностей нового стандарта HTML5 является элемент ‹canvas› , или холст. Холст предназначен для создания (именно, создания) растровых изображений на странице средствами графического движка браузера. 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).

Читать еще:  Установить переводчик в браузер яндекс

Поэтому для поддержки огромной доли рынка мобильных устройств с возможностью подключения к сети Интернет анимацию начали создавать при помощи javascript . Для этого обычно используют библиотеки, как например jQuery или Prototype. C введением в действие стандарта CSS3 часть анимаций возможно создавать с помощью каскадных таблиц стилей. Однако самыми широкими возможностями по созданию изображений и анимаций пользуется стандарт HTML5 и его новый элемент ‹canvas› .

Элемент ‹canvas›

‹canvas› — это новый элемент HTML5, который позволяет создавать изображения на сайте с помощью javascript. Область использования холстов довольно широкая. Чаще всего его можно увидеть при создании деловой графики (чарты, диаграмы, графики), а также для рендеринга браузерных игр (чаще всего встречаются в социальных сетях). У ‹canvas› есть только 2 атрибута – ширина и высота. Если эти атрибуты отсутсвуют, то ширина по умолчанию будет равна 300 пикселей, а высота 150 пикселей.

Элемент ‹canvas› создает контекст отрисовки, на котором в будущем можно создавать и манипулировать объектами javascript. Другими словами, ‹canvas› представляет собой прямоугольную область, в которой с помощью javascript можно «рисовать».

На сегодняшний день стандарт полностью описывает работу двумерных контекстов (для плоской графики, 2D). Однако, сейчас проводится работа по разработке стандарта WebGL, для поддержки элементом ‹canvas› трехмерных контекстов (примеры работ можно посмотреть в Лаборатории Chrome).

Для размещения элемента на странице HTML достаточно указать:

‹canvas width=600 height=250› ‹/canvas›

После помещения на страницу элементом ‹canvas› можно манипулировать как угодно: помещать на него текст, рисовать графические элементы и линии, выполнять заливку, добавлять анимацию. Все это делается при помощи команд javascript. Чтобы использовать холст программным путем необходимо прежде всего получить доступ к его контексту. После этого выполняются все необходимые действия с контекстом и только тогда результат подтверждается и выводится на холст. То есть, сначала изображение создается программно, а потом результат выводится визуально.

Так как не все браузеры поддерживают HTML5, то на данное время воспользоваться ‹canvas› можно только в следующих браузерах (по информации caniuse.com):

  • Internet Explorer 9+
  • Firefox 2.0+
  • Chrome 4+
  • Safari 3.1+
  • Opera 9.0+
  • iOS 3.2+
  • Android 2.1+

В случае, если к ‹canvas› обратились из браузера, который не поддерживает этот элемент, то пользователь увидит содержимое, помещенное внутри этого тега (такое содержимое называют аварийным), например:

‹canvas› Your browser is not support HTML5 Canvas! Please update your browser version! ‹/canvas›

Рисование на холсте

Перед тем, как начать рисовать, нужно получить от браузера контекст холста, то есть экземпляр объекта CanvasRenderingContext2D . Сделать это можно следующим образом:

В первой строке мы получам сам холст, а во второй с помощью вызова единственного метода объекта холста getContext() получаем контекст этого холста. Параметр 2D указывает на то, что получаемый нами контекст будет создавать плоское изображение (экземпляр объекта CanvasRenderingContext2D ).

Теперь можно приступить к рисованию. Следует помнить, что для рисования с помощью ‹canvas› потребуется понимание системы координат, где каждой точкой является пиксель на экране, а началом координат является верхний левый угол холста. Создадим новый холст, зададим для него атрибут id=canvas и добавим к нему рабочку, чтобы было удобнее следить за результатом:

‹canvas width=150 height=150 style=»border:1px solid #ccc;» id=canvas› ‹/canvas›

Результат вы можете видеть ниже:

Для иллюстрации примеров будем использовать функцию CreateImage() , которая вызывается при загрузке страницы:

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

Для отображения прямоугольных фигур используются следующие методы:

  • strokeRect(x, y, width, height) — создает прямоугольник без заливки, где x и y — координаты верхнего левого угла прямоугольника, а width и height — соответственно ширина и высота прямоугольника
  • fillRect(x, y, width, height) — создает прямоугольник с заливкой. Значения параметров аналогичны методу strokeRect
  • clearRect(x, y, width, height) — очищает прямоугольную область. Значения параметров аналогичны методу strokeRect

Изменим функцию CreateImage() для демонстрации рисования двух прямоугольников:

Если в код функции CreateImage() добавить строку

То получится следующий результат:

Работа с цветом и толщиной линий

Изменять свойства пера, то есть цвет и толщину линий, можно изменяя свойства экземпляра обекта контекста CanvasRenderingContext2D . Для этих целей существуют следующие свойства:

  • strokeStyle — задает цвет линии контура. Все объекты, которые будут нарисованы позже будут иметь цвет контура, указанный этим свойством. Сам цвет задается в одном из форматов цвета CSS3. Например, rgba(r, g, b, a) или #RRGGBB . Могут использоваться и константы
  • fillStyle — это свойство задает цвет заливки внутри контура. Все объекты, которые будут нарисованы позже будут иметь цвет заливки, указанный этим свойством. Аналогично, цвет задается в формате CSS3
  • lineWidth — это свойство задает толщину линии в пикселях

Следует учитывать, что нельзя назначать свойству strokeStyle значение свойства fillStyle и наооборот — это вызовет ошибку в скрипте. Добавим эти свойства в наш пример:

Работа с пером

Рисование более сложных объектов производится с помощью виртуального «пера». Для работы с ним существует ряд методов. Прежде всего нужно понять разницу между двумя основными методами:

  • moveTo(x,y) — смещает перо в точку с координатами x , y (перо поднято)
  • lineTo(x,y) — рисует линию из текущей координаты пера в точку с координатами x , y (перо опущено)

Изначально перо находится в начале коордиант — верхнем левом углу холста.

Начало рисования сложной линии должно начинаться вызовом метода beginPath() , а конец stroke() . Для того, чтобы замкнуть фигуру можно воспользоваться вызовом метода closePath() . Замкнутую фигуру можно залить цветом. Для этого вместо stroke() следует использовать fill(). Рассмотрим пример:

Читать еще:  Яндекс браузер без имени что делать

Результат работы скрипта представлен на нижнем рисунке

Рисование дуг и кривых

Для рисования дуг используется метод arc(x, y, r, start, end, direction) . Здесь x и y — координаты центра окружности, которой соответствует дуга, r — ее радиус, start — угол начала дуги, end — угол конца дуги, direction — логическое значение направления дуги ( true — по часовой стрелке, false — против часовой стрелки)

построит следующую дугу:

Нужно учесть, что окружность — частный вид дуги, значит, для ее изображения достаточно изменить предыдущую строку на

И в результате получится окружность:

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

  • quadraticCurveTo (Px, Py, x, y) — создает квадратичную кривую
  • bezierCurveTo (P1x, P1y, P2x, P2y, x, y) — создает кривую Безье

Здесь x и у — это точки в которые необходимо перейти, а координаты P — это дополнительные точки, необходимые для построения кривых. Одна для квадратичной и две для кривой Безье. Рассмотрим пример:

Результат отображен на рисунке внизу:

Вставка текста

Существует два метода и несколько свойств для вывода и форматирования текста. Для вывода текста используют следующие методы:

  • strokeText(‘text’, x, y, width) — выводит на холст текст без заливки. Здесь ‘text’ выводимая строка, x и y — координаты верхнего левого угла блока с текстом на холсте, width — максимальная ширина блока с текстом. Если выводимый текст получается шире, холст выводит его либо шрифтом с уменьшенной шириной символов (если данный шрифт поддерживает такое начертание), либо шрифтом меньшего размера.
  • fillText(‘text’, x, y, width) — выводит на холст текст без контура, только заливкой. Все параметры повторяют аналогичные у метода strokeText().

Для форматирования текста есть несколько различный свойств:

  • font — свойство позволяет установить все возможные параметры выводимого шрифта. Соответствует аналогичному стилевому свойству font
  • textAlign — свойство позволяет выравнивать текст относительно блока вывода (точки, которая задается координатами x и y)
  • textBaseline — свойство позволяет задать вертикальное выравннивание текста относительно базовой линии

Пример вывода текста:

Размещение на холсте внешних изображений

Кроме рисования графических элементов на холсте можно разместить уже готовое изображение в любом из стандартных форматов. Для этого необходимо создать экземпляр объекта Image. Пример использования:

Рисуем в браузере

А вы давно рисовали онлайн, не считая «вконтактовских» граффити ? То о чём я собираюсь написать далеко не граффити в соцсети, слои с режимами смешевания, чувствительность пера к нажатию, продвинутые кисти… это отнюдь не для “ПРЕВЕД”ов на стене у соседа)

Вступление

Я когда-то задался идеей и собрал большущий список онлайн-редакторов в которых можно было хоть что-то нарисовать. Тогда это было в новинку и было просто интересно посмотреть что там люди напридумывали… Если мне не изменяет память, было их там около сорока, включая разные «детские» paint-образные рисовалки. Собрать то собрал а вот практического применения всему этому хламу из списка так и не нашлось.

Потом, во времена ведения моего блога(которого уже нет и не будет) я сделал подборку уже из нескольких редакторов в которых можно было нарисовать более-менее законченную работу. Уже в этом списке их было где-то 5-7 (уже не вспомню).

Как ни странно, после почти двух лет с того времени, у меня в закладках все-таки остался один интересный сервис с того моего последнего списка. Пройдя такой как-бы «естественный отбор» он с успехом дожил до сегодня, и вполне бодро посещается мною… ну не реже 1 раза в месяц это точно :D.

Что? Где?

Так что же это за сервис? — спросите вы, 2draw.net — отвечу я :D.

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

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

Давим на DRAW!. Там у нас 2 варианта или самостоятельное рисование или коллективное «Live 2draw» (есть несколько комнат кому интересно). Там же несколько вариантов для обоих вариантов, разделены по опыту(сложностей быть не должно), изучите внимательно.

В одиночном режиме на выбор предложат 4 редактора, тут уж дело вкуса, пробуйте на собственной шкуре. Советую проявить настойчивость и изучить хотя бы один из них У всех свои особенности, плюсы и минусы. Жаль конечно, но особенности технологии (скорей всего) не позволяют делать очень большие изображения в браузере. 800х800 в большинстве случаев — максимум, что ограничивает уровень работы, как ни печально.

Телодвижения

Так как работает всё на технологии Java, то для начала (у кого почему-то не стоит еще) устанавливаем в системе Java Runtime Environment

Теперь первое что нам понадобится это установить драйвер планшета(пера) для браузера, чтоб перо умело передавать нажатие приложению в браузере. Качаем драйвер для Windows или Linux (смотря что у вас), устанавливаем и перезагружаем браузер. После перезагрузки идём сюда и пробуем всё ли работает. Замечу что работает как с вакомами так и джиниусами точно (сам проверял)

Если всё отлично — регистрируемся и рисуем :D. Если нет, то тут уж вопросы не ко мне :).

Ссылка на основную публикацию
ВсеИнструменты 220 Вольт
Adblock
detector