Рубрика «canvas» - 23

в 12:39, , рубрики: canvas, javascript, Paper.js, Raphael.js, web-drawing, Веб-разработка

Набрёл на статью со сравнением трёх JS библиотек для рисования в WEB Paper.js, Processing.js и Raphael.js. Думаю она будет интересна не только мне.

Прежде чем начать рисовать что-либо в браузере, спросите себя о следующих трёх вещах:

Web Drawing библиотеки: Paper.js Vs. Processing.js Vs. Raphael.js

  • Вам нужна поддержка старых браузеров?
    Если ответ да, тогда единственный выбор, это Raphaël. Он поддерживает браузеры вплоть до IE 7 и Firefox 3. У Raphaël есть даже ограниченная поддержка IE 6, несмотря на то, что некоторые базовые для библиотеки технологии не могут быть реализованы в этом браузере.
  • Вам нужна поддержка Android?
    Android не поддерживает SVG, так что вам придется использовать Paper.js или Processing.js. Существуют слухи, что Android 4 будет поддерживать SVG, но большинство современных Android устройств уже не будет его поддерживать.
  • Ваш рисунок интерактивный?
    Raphaël и Paper.js сосредоточены на взаимодействии с рисуемыми элементами посредством клика мышкой, перетаскивания и касания. Processing.js не поддерживает никаких события уровня объекта, потому обработать движения пользователя в нём довольно сложно. Processing.js может рисовать классную анимацию на Вашей домашней страничке, а Raphaël и Paper.js более подходят для интерактивных приложений.

Читать полностью »

в 22:26, , рубрики: canvas, Инфографика, Программирование

Как вы уже давно привыкли, график вещественной функции в математике — некая кривая, которая показывает, как ведёт себя функция при изменении её аргумента. Иногда эта кривая может быть весьма красива, особенно, если речь идёт о графиках некоторых уравнений, как, например, этого.
Но в данном посте речь пойдёт о функции двух вещественных аргументов. И возвращать эта функция будет не число, а оттенок цвета. Да-да, значение от 0 до 255, которое будет зависеть от положения точки, то есть от двух её координат (раз уж мы собрались делать плоский рисунок). Кто до сих пор слабо представляет, о чем идёт речь, объясню на примере. Вот график функции cos(x*y):
image

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

в 12:30, , рубрики: canvas, html5, optimization, performance, Блог компании Microsoft, Веб-разработка

Как раскрыть мощь HTML5 Canvas для игр

Браузеры, поддерживающие HTML5, и платформа HTML5 для Windows 8 Metro сегодня становятся серьезными кандидатами для разработки современных игр.

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

Цель данной статьи — дать вам несколько подсказок, как выжать максимум мощности из HTML5 Canvas. Статья состоит из двух основных частей [вы читаете первую]. David Rousset скоро опубликует вторую часть.

В статье я буду показывать ключевые идеи на одном и том же примере — это эффект 2D-туннеля, который я написал для Coding4Fun-сессии на TechDays 2012 во Франции.
Читать полностью »

в 5:53, , рубрики: canvas, CRM, html, html5, Блог компании Ascensio System, онлайн редактирование, управление документами, управление проектами, метки: , , , , ,

В предыдущем посте мы рассказали вам, что одной из главных целей участия в CeBIT 2012 было анонсирование нового онлайн редактора документов TeamLab. Сегодня поподробнее о редакторе (на данный момент он в beta версии), как пришли к идее его создания и как, в итоге, реализовали.Читать полностью »

в 18:52, , рубрики: canvas, Google Chrome, html, WebGL, метки: ,

28 марта версия Google Chrome 18 появилась в стабильном канале и уже установлена на компьютерах большинства пользователей Chrome. Среди разных улучшений в новой версии следует особо отметить рендеринг с аппаратным ускорением Canvas2D под Windows и Mac OS X. Благодаря GPU-ускорению Canvas2D будет быстрее работать в браузере, что позволит повысить производительность и качество работы HTML5-игр и других веб-приложений.

Кроме Canvas2D, в свежей версии Chrome заработал движок для программной растеризации SwiftShader для WebGL. Движок лицензирован у компании TransGaming и обеспечивает работу WebGL на старых компьютерах, не поддерживающих аппаратное ускорение WebGL.
Читать полностью »

в 10:06, , рубрики: android, canvas, ipwebcam, javascript, Веб-разработка, фото, метки: , , , ,

Здравствуйте!

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

Фотографировать обычным фотоаппаратом, потом заливать фото на компьютер, искать каждый товар в админке, потом искать соответствующее фото, показалось очень долго. Гораздо проще открыть товар в админке и навести телефон на товар. Тем более, что при хорошо выставленном освещении, современные смартфоны выдают вполне качественную картинку.

Теория

В андроид-маркете лежит замечательная программа IpWebCam, которая позволяет превратить свой телефон в полноценную веб-камеру. Кроме того у нее есть api для получения фотографий с автофокусом. При запуске IpWebCam, на телефоне поднимается web-сервер, который позволяет с локальной машины по wi-fi получать текущий кадр с телефона по адресу вида 192.168.0.14:8080/shot.jpg

Идея была следующая:

  1. Вставить в форму <img> с адресом фотографии со смартфона
  2. Создать canvas и в него скопировать содержимое <img>
  3. Сохранить данные при помощи canvas.toDataURL()
  4. Отправить данные на сервер при помощи ajax

Читать полностью »

в 22:10, , рубрики: canvas, div, html5, javascript, метки: , ,

arrows_for_blocksЗдравствуйте!

Недавно появилась необходимость сделать простое иерархическое дерево для web страницы (структура организации). Блоки получились неплохие, но когда пришло время соединить все стрелками, возник вопрос – как? Решение было два: рисовать стрелки в .png или же использовать спецсимволы.

Но хотелось чего-то более быстрого, удобного, современного – т.е. просто указать: стрелка от блока А к блоку Б. Уже к вечеру была написана небольшая библиотека, позволяющая реализовывать задуманное…
Читать полностью »

в 14:45, , рубрики: canvas, game development, html 5, javascript, mozilla, websockets, метки: , , , ,

BrowserQuest от Mozilla — это дань классическим многопользовательским играм. Вы играете за молодого воина, который ищет приключения на свою пятую точку. Тут не нужно спасать красавицу-принцессу, но это вам с лихвой окупится опасным миром, наполненным сокровищами и корованами. И главное, все это сделано с помощью HTML5 и JavaScript!
BrowserQuest — многопользовательская игра на canvas
Проект с открытым исходным кодом и хостится на GitHub!
Читать полностью »

в 12:34, , рубрики: canvas, html5, Веб-разработка, метки: ,

HTML5 Canvas – очень обширная тема со многими “вкусностями”, о многих из которых уже писали и ещё будут писать. Поэтому, я хочу немного рассказать в этой статье, только об одной маленькой, и как на первый взгляд может показаться банальной темой – работа с текстом. Я хочу показать, что с ним почти также можно работать, как с обычным текстом в вебе, т.е. позиционировать, накладывать стили и градиенты, а также писать многострочные предложения легко и без проблем.
Читать полностью »

в 12:11, , рубрики: canvas, favicon, javascript, JFavicon, JS, динамика, оповещения, сайты, счетчик, метки: , , , , ,

image

Данная библиотека является доработкой tinyicon с использованием всех пожеланий пользователей. Давайте разрабатывать вместе ©

Представляю Вам новую библиотеку JFavicon. Сразу после подключения ее к сайту и инициализации Вы получаете удобный инструмент для динамического изменения favicon. В ее функционал входит:

  • Автоматическая установка favicon
  • Изменение favicon, в зависимости от каких-либо событий
  • Счетчик, с возможностью смены стиля, прямо в favicon
  • Динамическое изменение title страницы

Читать полностью »

1...1020...222324
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js