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

Сегодня на днях я сделал Parallax эффект на HTML5 Canvas. К сожелению я не смог сделать живой пример, поскольку программа Github (Windows) не подчиняется мне, даже не хочет заливать в gh-pages (пришлось на master). Я с трудом уговорил залить JNG пример.

Вот собственно сам пример (точнее ее исходники): github.com/Alexei03a/html5-parallax
Мне нечем было снимать видео, поэтому этот топик останется без самого интересного.

Это сцена зеленого круга с падающей тенью и фоном в стиле паттерн. Самое интересное — никакого WebGL.
Правда сделал на скорую руку. Кроме того, нету Motion Blur, высококачественной тени, более хорошего parallax (как в WebGL).
Читать полностью »

Вы замечали множество приложений, написанных на Canvas. Почти все они используют тяжеловесные библиотеки для реализации событий. Дело в том, что обычный HTML5 Canvas не умеет использовать события, но я научу вас их внедрять в Canvas, а если точнее — реализовывать их работу.

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

HTML5 Canvas — элемент для работы с графикой. Почти все мы начинали с простых fillRect, strokeRect и clearRect, но затем мы переходили на использование Path и картинок, или брались за «тяжелые» библиотеки. Сегодня я расскажу простой способ упростить работу с Canvas элементом.
Читать полностью »

Привет!
Сегодня я хочу рассказать о том, как написать простую логическую игру для Android OS с использованием Canvas. С этой игрой я познакомился около 5 лет назад на своем телефоне. Название забылось, а поиски на нескольких тематических форумах ни к чему не привели и я решил написать свою реализации этой игры. Разработка для меня скорее хобби, хотя иногда берусь за небольшие проекты. После некоторых раздумий я решил не использовать движок, а писать самостоятельно. Причины такого решения: желание получить опыт работы с Canvas'ом.
Читать полностью »

Piecon — динамическая круговая диаграмма в фавиконе
Крошечная (2 килобайта в минифицированном виде) JavaScript-библиотека Piecon генерирует круговую диаграмму на месте фавикона. API предельно прост и состоит из трёх методов объекта Piecon.
Читать полностью »

Превращаем Хабр в «пятнашки» с помощью Canvas

Добрый день, уважаемые посетители Хабра.

Хочу поделиться с вами своим небольшим скриптиком, который можно использовать с помощью методики Bookmarklet на практически любом сайте. Итак…

Что это?

Как уже видно из заголовка, это игра «пятнашки». Особенностью данной игры является то, что она использует текущее видимое изображение страницы. При разработке была использована библиотека html2canvas Николаса фон Херцена (Niklas von Hertzen), который позволяет делать скриншот в браузере на стороне пользователя, а результат размещать в canvas. Именно это изображение (или его часть) и будет источником для игрового поля «пятнашек».

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

Сегодня я прочитал пост пользователя celen и вдохновился красотой T-фракталов. Так как я немного увлекаюсь созданием растровых композиций в JavaScript Canvas, то у меня возникла идея реализовать то же самое, только на стороне клиента силами JS, освобождая сервер от нагрузки.
Читать полностью »

Здравствуйте.
Мне бы хотелось рассказать про мой «Bart Chalkboard Generator».image
Я уверен, что большинство из вас знают сериал «The Simpsons», и вы помните что почти в каждой новой заставке Барт писал на школьной доске что-то новое, типа: «They are laughing at me, not with me». А в интернете часто всплывает картинка с текстом: «I will use google before asking bump questions». И вот однажды я подумал, почему бы не создать простой генератор подобных картинок, да ещё и на Html5, что бы попрактиковаться?
Читать полностью »

I. Предисловие.

Когда-то давно мне запал в память эпизод из киберпанковского романа: один герой показывает другому экран, на котором быстро сменяют друг друга пиксели. Каждое состояние экрана представлено определённым числом, программа постепенно перебирает варианты.

Можно представить, что рано или поздно на таком экране могли бы появиться разные удивительные вещи: страница из «Войны и мира», «Джоконда», первые такты «Лунной сонаты», гениальное решение известного уравнения, фотография любого человека, эта страница Хабра, сообщение о безвестном событии прошлого или подробное предсказание будущего.

С тех пор я периодически пытался сделать что-то по касательной, были какие-то мелкие поделки на Perl. А недавно захотелось сделать что-то подобное на JavaScript.

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

Разрушитель usDe Tornado, США

Приглашаю в открытый бета тест — http://www.casus-belli.com
Читать полностью »


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