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

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

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

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

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

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

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

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

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

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

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

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

Теория

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

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

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

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

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

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

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

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

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

image

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

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

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

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

image

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

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

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

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

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

Decoding HTML5

Несколько дней назад в свет была выпущена книга под названием "Decoding HTML5", в которой, как вы уже могли догадаться речь идёт о нововведениях, которые появились с приходом HTML5. Не сказал бы, что книга была очень интересна мне, т.к. об этих новых рюшечках нововведениях не писал только ленивый, но всё-таки повторить и закрепить материал было полезным делом. Тем более, что книга написана небезызвестным Джефри, а это значит, что читать её будет легко и приятно. Но хватит расхваливать автора, а перейдём к краткому содержанию книги:
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js