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

в 14:08, , рубрики: canvas, Graphics2D, javascript, библиотека, фреймворк

Доброго new Date().getTimeOfDay();

Graphics2D.js — объекты, интерактивность, анимация на canvas… И ничего лишнего

HTML5 Canvas незаменим, когда нужно что-то динамически нарисовать. Но если мы захотим что-то динамически изменять — нам придётся хранить состояние элементов и перерисовывать при необходимости.
Если мы захотим реагировать на события — нам придётся ловить координаты мыши и определять, находятся ли они внутри нужной фигуры.
И т.д.

Частые повторяющиеся задачи. Так и появляются фреймворки и библиотеки.

Впрочем, случай с Graphics2D.js немного другой: мне просто захотелось порисовать. С объектной моделью, анимацией и событиями. И — ничего лишнего.
Но максимально расширяемо: идей много, и всё можно вынести в плагины.
Читать полностью »

в 6:52, , рубрики: canvas, excel online, office online, open source, SaaS / S+S, word online, документы, редактор документов онлайн, редактор таблиц онлайн, редакторы, текстовый редактор

Определенная доля текстовой части моего диплома была написана на Nokia E63 — было срочно и поздно, поэтому работать приходилось в пути, переездах, на конференциях, а ноутбука у бедного студента не было. Удобная QWERTY-клавиатура и доступный Интернет позволяли набирать и редактировать текст даже с определенным комфортом. В общем, некоторый опыт извращений в наборе текста у меня есть.

image

То ли дело современные студенты — ноутбуки, планшеты, редакторы онлайн и оффлайн, совместная работа над документами. Кажется, проблемы в далеком прошлом.
Читать полностью »

в 11:04, , рубрики: canvas, javascript, Веб-разработка

Рано или поздно перед каждым разработчиком встает вопрос о печати страницы в красивом формате, будь то pdf или просто красивая печатная версия вашего сайта. Для этого вы можете использовать html2pdf, например. Но эта бибилиотека поддерживает только вебкит. Что же делать с FF и IE? Нужен более универсальный способ печати, кроме того, есть ряд задач.

  • Печать всей страницы целиком;
  • Печать части страницы (без футера и шапки, например);
  • Максимально кроссбраузерно и просто.

В этот момент можно как раз вспомнить о canvas и попробовать создать изображение нашей страницы и отправить на печать именно его. Не знаю на сколько этот способ прост, но мне он показался наименее сложным в реализации. Читать полностью »

в 2:58, , рубрики: canvas, javascript, jquery, Веб-разработка

Решал интересную задачу – сделать визуальный редактор-конфигуратор окон.

Подробностями процесса разработки я с вами, коллеги, и поделюсь.

UPD. Добавил скриншоты.
UPD2. Развернул демо-версию.
UPD3. Речь идет об окнах оффлайновых, застекленных, деревянных или пластиковых — через которые на улицу из дома смотрят

Спасибо за отклики!
Читать полностью »

в 7:31, , рубрики: canvas, game development, javascript, tiled, метки:

Здравствуй!

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

Мы будем использовать JavaScript фреймворк «Phaser.js», благодаря которому мы получим ряд преимуществ, в том числе готовый механизм рендеринга тайловых карт.

Сам механизм подгрузки тайловых карт Phaser предлагает нам на выбор сразу 2 варианта хранения тайловых карт — JSON и табличные данные в формате CSV.

В редакторе, о котором я расскажу позже, я сделал два слоя: с травой и деревьями.

image

Да, выглядит это все замечательно, но нужно разобраться, что же такое тайл, как собрать из них целый мир, что есть наборы тайлов и как устроен Phaser.Tilemap.
Читать полностью »

в 20:56, , рубрики: canvas, css3, game development, Gamedev, html5, javascript, Веб-разработка, горячие пирожки, пирожки

Пост о маленьких видеоиграхПривет, друзья. В этом посте мне бы хотелось рассказать, как я писал маленькие HTML5-игры для конкурса js13k, какие подводные камни повстречались на этом тернистом пути, и что получилось в результате.

Подводные камни на тернистом пути

(Подводные камни на тернистом пути — это русло пересыхающей реки, например. Летом в нем растет всякая трава и другие вегетарианские штуки, а осенью начинаются дожди, и всё уходит под воду. Получается терновник вместе с подводными камнями, очень метафорично и травмоопасно.)

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

Но сначала 77 слов про js13k

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

в 14:40, , рубрики: canvas, JS

Занимаясь одним большим проектом, добавил небольшую функциональность — выделение «маркером». Затем выделил эту часть в pixi-editor. И теперь Pixi-editor — это рисовалка на основе pixi.js, и как следствие использует <canvas> для рисования в браузере. Довел до примерного функционала рисовалки граффити Вконтакте.

Кому любопытно: демо, гитхаб.
Далее скриншот и пара комментариев.
Читать полностью »

в 6:19, , рубрики: canvas, html, javascript, метки:

Недавно вышла вторая версия фреймворка RPG JS v2 основанного на движке CanvasEngine.

image

Основная информация

Автор: Samarium
Лицензия: GPL
Язык: Английский, Французский

Введение

— RPG JS представляет собой framework для создания браузерной RPG. Для работы с данным фреймворком вы должны иметь минимальные знания в области программирования, которые облегчат создание инфраструктуры игры. (прокрутки, столкновения, движения и т.д. ...)

— RPG JS написана на HTML 5 и Javascript. Для работы с растровыми изображениями, спрайтами и т.д. используется библиотека EaselJS

— Скрипты из RPG Maker XP можно конвертировать в карту для RPG JS

— Совместим с браузерами: IE, Google Chrome, Firefox, Safari, Opera

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

в 10:32, , рубрики: canvas, html, javascript, Программирование

Прочитав здесь пост об этой замечательной зверушке (wiki) я подумал, что будет интересно его реализовать и за вечер написал его на js+canvas.
Заодно чтобы было не скучно добавил ему соседей, получилось 5 цветовых популяций и ограниченное поле, которое породило граничные узоры.

Ну был бы муравей и был, но сегодня запустив его я поймал очень интересное поведение, желтая популяция в какой то момент начала методично избавляться от плодов деятельности розовой и при этом не оставлять следы своей деятельности, меня это заинтересовало и я потратил еще пару минут наблюдая за полем, желтая популяция полностью уничтожила стартовую локацию розовых, затем полностью само уничтожилась и начала строить дивный новый мир с «0», т.е. с 1 желтого пикселя.
Читать полностью »

в 22:30, , рубрики: canvas, javascript

Сегодня я сделал небольшой сниппет кода для себя и решил поделиться с сообществом его содержимым и историей его создания.

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

Для начала озвучу чего мне так хотелось:
Мне нужен слайдер — аналог регулятора громкости, совмещенный с прогресс-баром. Эдакий компонент управления мощностью чего-либо, совмещенный с одновременной индикацией этой мощности. Иногда мощность может превышать установленный предел в 100% — необходимо отображать этот уровень и правильно высчитывать процент. Иногда мощность может заходить ниже нуля ( не знаю может ли — но я на всякий случай предусмотрел такую возможность) и этот уровень тоже надо отображать. Более того, то устройство, которое мы регулируем может быть инертным и разгоняться не с той скоростью, с которой мы выставляем значение. Если вы нажали кнопку форсажа на самолете — то двигатели выйдут на форсажный режим через некоторое время. То есть надо отдельно задавать значение прогрессбара и также отдельно получать-устанавливать текущее значение ползунка слайдера.

Может быть я и фиговый искатель, но в итоге психанул — решил сделать свой:
Здесь ссылка на результат, а под катом описание процесса
Читать полностью »

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