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

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

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

  • Плавная прокрутка
  • Подгрузка областей карты

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

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

в 17:35, , рубрики: 3d графика, canvas, d3.js, dataviz, javascript, svg, Веб-разработка, Инфографика, картография, метки: , , , , ,

Доброго времени суток, уважаемый читатель! В прошлый раз мы изучали процесс создания интерактивной карты-хороплета, теперь предлагаю немного усложнить задачу и перейти к трёхмерной модели Земли, именуемой в народе глобусом. Глобус делать будем двух видов: SVG версия и Canvas версия. В обоих случаях будем использовать JavaScript библиотеку d3.js. У каждого варианта свои преимущества. В моём исполнении Голубая планета выглядит следующим образом:

Планета Земля

А как создать свой собственный Мир с материками и океанами можно узнать под катом.Читать полностью »

в 16:34, , рубрики: canvas, html5, Песочница, частицы, метки: , ,

Введение

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

в 4:44, , рубрики: canvas, html5, javascript

Веб сейчас везде, и предлагает очень мощную среду для создания и распространения приложений. Вместо цикла: написание кода → компиляция → запуск, просто обновите приложение или даже напиши код «на живую» в браузере. Кроме того, это относительно безболезненно позволяет распространять своё приложение на огромном количестве платформ. Интересно, что в последние несколько лет, разработка игр, используя HTML5, стала реальностью.
Элемент canvas был введен вместе с HTML5 и предоставляет API для работы с ним. API — прост, но если Вы никогда не работали с графикой, Вам потребуется время чтобы привыкнуть. Canvas поддерживается большим количество браузеров, что делает веб — хорошей площадкой для создания игр.Читать полностью »

в 12:18, , рубрики: canvas, Knockout.js, Веб-разработка, математика, фракталы, метки: , , ,

Начнём с дисклеймера. В данной статье я позиционирую себя скорее как математик, а не как веб-разработчик. С радостью приму любые замечания, касающиеся технической реализации этого чуда. С не меньшей радостью готов услышать другие варианты его названия («квадратный генератор фракталов» звучит как-то не очень). И, наконец, со значительно меньшей радостью я воспринял бы новость, что эту штуку уже придумали до меня, однако если это так — сообщите. Истина превыше всего.

Однако из-за чего весь этот сыр-бор? За подробностями прошу под хабракат.

«Квадратный» генератор фрактальных изображений на HTML5 Canvas + Knockout.js

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

в 11:32, , рубрики: canvas, filereader, html, html5, javascript, метки: , , ,

Генератор ASCII артов на HTML5 Доброго времени суток, уважаемые хаброжители.

В этой статье я расскажу о том, как при помощи HTML5 можно сделать простенькое приложение, которое будет генерировать ASCII-арты на основе обычных изображений. Статья ориентирована на тех, кто только начинает свое знакомство с такой замечательной технологией, как HTML5, коим являюсь и я. Профессионалы вряд ли найдут для себя что то новое.

Дело было вечером, делать было нечего

Копался я недавно в интернете в поисках обоев и наткнулся на одно интересное изображение(1.1мб). И меня “зацепила” идея рисовать изображения разноцветными буквами. Порывшись в интернете узнал, что это называется ASCII-art. Ну и конечно же первая мысль: “А запилю ка я приложение, что бы мои любимые обои таким образом нарисовало!”
Сказано — сделано. Есть время, есть желание — почему бы не попробовать. Читать полностью »

в 14:50, , рубрики: canvas, javascript

Полгода назад решил написать online-приложение «Карта звёздного неба». Думаю, многие из нас когда-либо видели эту самую карту звёздного неба, и вероятно, она привлекала к себе внимание.
Я подумал, что интересно будет осуществить нечто подобное на JS. Было решено отчасти использовать готовую библиотеку LibCanvas из-за её продуманного синтаксиса, что было важно при написании объёмных приложений.
image

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

в 12:23, , рубрики: canvas, симулятор, спутник, метки: ,

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

в 5:51, , рубрики: canvas, Digia, game development, QML, qt, Qt 5, qt quick, Qt Software, qt5, декларативное программирование, метки: , , , , , , ,

Работа с QML Canvas В последнее время на хабре было много хороших постов, раскрывающих аспекты работы с QML: XMLHTTPRequest, Loader, GLSL, но до сих пор никто не упоминал, что Qt Quick 2.0 содержит также компонент Canvas, который даёт нам возможность (сюрприз!) рисовать. Синтаксис использования тот же, что и у HTML5 Canvas, но лично мне, как человеку, далекому от разработки для веба, это ни о чём не говорило.
Продемонстрировать работу с ним я хочу на примере создания каркаса для игры, который, при желании, легко можно будет переделать либо в старую добрую Snake, либо во что-то вроде Achtung, die Kurve!Читать полностью »

в 9:54, , рубрики: canvas, html5, javascript, аналитика, Веб-разработка, разработка, управление проектами, метки: , , , ,

Речь в статье пойдёт об оконном калькуляторе. Да, я знаю что их море, но тот, о котором хочу рассказать — особенный. Он позволяет считать стоимость оконных изделий на сайте со средним отклонением от расчётной программы на производстве в 0.002%. На момент запуска проекта (май 2011 года) это калькулятор был единственным решением такого рода. Как обстоят дела с этим сейчас я не знаю, но судя по периодическим звонкам, допускаю что изменилось мало чего.

Особенности проекта:

Качественная предварительная аналитика задачи. Именно она определила ту границу которая позволила создать простой инструмент для основной целевой аудитории, полностью учитывающий требования по специфике для ~90% изделий требующих расчёта. В первой части будет именно об этом.

Выбор HTML5 Canvas в качестве основы для графической реализации. Многие разработчики до сих пор считают что данная технология “экспериментальная” и не подходит для сервисов ориентированных на широкую публику. Что тут говорить о марте 2011 года?.. Данный выбор стоил мне килограмма нейронов, но он полностью себя оправдал. Этому, а также другой специфике с которой пришлось бороться при реализации задачи будет посвящена вторая часть.
Читать полностью »

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