Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

24 октября приглашаем на онлайн-митап Hot Frontend в Казани

Разработка веб-сайтов *CSS *JavaScript *Canvas *ReactJS *
Всем привет! Приглашаем разобрать «горячие» вопросы Frontend-разработки на новом онлайн-митапе. Эксперты представят несколько кейсов из практики и ответят на вопросы слушателей. За самые интересные вопросы мы, как всегда, вручим полезные подарки. Ждем вас 24 октября, участие бесплатное.

Читать дальше →
Всего голосов 3: ↑3 и ↓0 +3
Просмотры 800
Комментарии 0

Nvidia выложила в открытый доступ бесплатную бета-версию нейросетевого графического редактора Canvas

Обработка изображений *Машинное обучение *Софт Видеокарты IT-компании


23 июня 2021 года Nvidia выложила в открытый доступ бесплатную бета-версию нейросетевого графического редактора Canvas. Минимальные системные требования: Windows 10, видеокарта из серии GeForce RTX, NVIDIA RTX, Quadro RTX, TITAN RTX, а также версия видеодрайвера 460.89 или новее. Размер дистрибутива бета-версии Canvas 1.0 составляет 1.1 ГБ.
Читать дальше →
Всего голосов 20: ↑19 и ↓1 +18
Просмотры 5.9K
Комментарии 9

Рисуем графику через ж… жаваскрипт

Разработка веб-сайтов *
Информация в принципе общеизвестная, но новичкам (вроде меня) может быть будет полезно.

Возникла тут недавно потребность рисовать чарты яваскриптом. В итоге была найден элемент canvas от WHATWG и его спецификация. Вещь в высшей степени привлекательная. Позволяет рисовать вот такие штуки:
штуки
Делается примерно так:
Читать дальше →
Всего голосов 60: ↑54 и ↓6 +48
Просмотры 2.7K
Комментарии 47

Забудем на минутку про canvas

Разработка веб-сайтов *
Как то так получилось, что рассматривая различные browser demo последних лет, не мог не заметить, что все повально стали использовать canvas.
Вот и недавно, просматривая хабр, наткнулся на wolf3d на джаваскрипте через canvas (от того же автора что и mario). (в ссылке буквы c и p русские, но это не я такой, а хабр)
А ведь на самом деле многие эффекты можно сделать без использования этого замечательного тэга.
А ещё, используя эти идеи, в некоторых случаях можно отказаться от флэша, тем более что, в отличии от канваса, это всё прекрасно работает в IE (доля рынка которого, пока ещё, очень велика).

Читать дальше →
Всего голосов 27: ↑24 и ↓3 +21
Просмотры 1.7K
Комментарии 22

Браузер Opera: XXI век

Opera
После всех мероприятий, проводимых компанией Opera Software в России в последнее время, где разработчики рассказывали о новых технологиях и возможностях, планируемых к включению в браузер в ближайшем будущем, многие пользователи Opera, которые по тем или иным причинам не смогли присутствовать на встречах, просили выложить где-нибудь презентацию, чтобы посмотреть на новшества. Сделать это было довольно затруднительно, т.к. каждое выступление норвежских разработчиков было своего рода импровизацией, а не скучным перелистыванием слайдов. Но вопросы оставались, поэтому я решил попробовать сделать статью, основанную на тех выступлениях разработчиков Opera, которую вам сейчас и представляю.
Читать дальше →
Всего голосов 53: ↑44 и ↓9 +35
Просмотры 1.1K
Комментарии 44

Поддержка < canvas> в IE

Разработка веб-сайтов *
Что такое canvas вы можете прочитать здесь и кое-что на хабре тут и тут (наглядный пример).

Vladimir Vukićević написал компонент ActiveX для IE, который добавляет в браузер поддержку тэга canvas. Чтобы использовать его нужно лишь добавить на страницу небольшой.js сниппет и тэг object который будет получать контроль. Разумеется, он полностью доступен для скриптов. Исходный код будет доступен для всех чтобы его можно было изучить и улучшить. Наличие этого компонента означает что canvas станет доступным во всех популярных браузера, не смотря на то, что Майкрософт ещё не добавил его поддержку.
via Christopher Blizzard

canvas в IE и Firefox
Читать дальше →
Всего голосов 23: ↑13 и ↓10 +3
Просмотры 1K
Комментарии 14

GameBox — аркадная игрушка на JavaScript.

JavaScript *
Привет.
Решил я познакомится с технологией canvas и написал ардкадную игрушку.

Использовал для старта руководство.

Скриншот и небольшой описание
Всего голосов 35: ↑24 и ↓11 +13
Просмотры 1.4K
Комментарии 24

Opera 9.62 против Opera 10.0 alpha 1

Opera
4 декабря 2008 года увидела свет первая альфа версия Opera 10.0 на двиижке Presto 2.2. Подробнее об этом радостном событии и новшествах движка можно прочитать в статье написаной fidelich. А что дает пользователю новый движок в числовом выражении, я попытаюсь выяснить под катом.
Продолжить чтение
Всего голосов 93: ↑85 и ↓8 +77
Просмотры 699
Комментарии 71

HTML 5: пять вещей вызывающих особый интерес

Разработка веб-сайтов *
Перевод
imageHTML 5 — это грядущее обновление гипертекстового языка разметки, основного способа создания контента для размещения его во всемирной паутине. Разработка HTML остановилась в 1999 году, на версии HTML 4.01 и с тех пор web-содержимое изменилось так, что текущие спецификации HTML перестали соответствовать сегодняшним требованиям.

HTML 5 нацелен на то, чтобы увеличить функциональную совместимость HTML и соответствовать растущим требованиям разнообразного и смешанного web-контента. HTML 5 так же нацелен на устранение недостатков четвертой версии. В этой статье мы взглянем на 5 новых интересных вещей в HTML 5.

Это статья нашего гостя Jacob Gube, web-разработчика и дизайнера, автора Six Revisions — блога о web-разработке и дизайне.
Читать дальше →
Всего голосов 130: ↑123 и ↓7 +116
Просмотры 7.7K
Комментарии 190

Динамическое создание exCanvas

Чулан
Автор(SiDChik@mail.ru) не имеет аккаунт поэтому уговорил меня запостить сию статью

С недавних пор я устроился на работу WEB-Разработчиком, делаю on-line карту. Помимо банального передвижения, на карте приходиться рисовать различные объекты, для этого у меня используется Canvas. Если поискать на Хабре, то можно найти пару топиков про данную технологию. Если быть кратким, то это инструмент для отрисовки графики средствами JavaScript.
По умолчанию данный инструмент не поддерживается в IE, для этого можно поискать и найти скрипт ExCanvas. Для его установки, достаточно подключить один единственный JavaScript файл.

В ходе работы появилась ситуация, которая требует динамического создания canvas’а. К сожалению, что-то типа document.createElement(‘canvas’); отказывалось работать в IE. И при вызове функции getContent, происходила ошибка. При этом, на выходе у меня должен получится «народный» продукт, следовательно, обязательно необходима кросс-браузерность.
Решение проблемы, читаем дальше
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 1K
Комментарии 6

«Berts Breakdown»

IT-стандарты *
Перевод
Мы тут такое обычно публикуем по пятницам, но кто сказал, что немного позабавиться в понедельник — это неправильно? Пол Брант (Paul Brunt) изготовил отличную игру, использующую элемент canvas. Она весьма впечатляет. Также Брант использовал Chrome Frame, чтобы игра работала и в IE невозбранно.

[Berts Breakdown]
играть сейчас же
Всего голосов 26: ↑13.5 и ↓12.5 +1
Просмотры 494
Комментарии 9

Google требует от Microsoft поддержки SVG и Canvas

Работа с векторной графикой *
Как известно, в этом году Google решила принять конференцию SVG Open 2009 прямо в собственном кампусе. Таким образом, Google подчёркивает свою всяческую поддержку открытому стандарту SVG (Scalable Vector Graphics), который они хотят продвигать повсеместно.

От лица компании Google на конференции выступил Брэд Нойберг (Brad Neuber). Он сказал, что SVG — особенный формат, который пользуется любовью разработчиков. В этом смысле его сложно с чем-то сравнить, настолько веб-девелоперы любят SVG. Рынок явно требует реализации этого стандарта, заявил Нойберг. Эти его слова подтверждаются результатами опроса веб-разработчиков, где векторная графика возглавила список из трёх десятков самых востребованных фич.
Читать дальше →
Всего голосов 77: ↑59 и ↓18 +41
Просмотры 1.3K
Комментарии 58

Вышел в свет черновик стандарта WebGL

IT-стандарты *
[WebGL]Черновик стандарта WebGL описывает свободный кросс-платформенный API, предназначенный для подключения OpenGL ES 2.0 к холсту (<canvas>) в качестве контекста, возвращаемого стандартной функцией canvas.getContext().

Публичная версия черновика была выложена 10 декабря (в четверг) на CVS сайта Khronos Рабочей группою WebGL.

Арун Ранганатан (Arun Ranganathan) выложил во блоге hacks.mozilla.org достаточно подробный вводный рассказ о том, как включить эту функцию в еженощных тестовых сборках браузера Firefox, и как обеспечить её работу на тех видюхах, которые не поддерживают OpenGL ES 2.0 сами собою. (Читатели в тамошних комментариях проявляют неимоверную радость и признаются в том, что ждут не дождутся новой версии Файерфокса.)

[WebGL demo screenshots]Владимир Вукичевич (Vladimir Vukićević) также посвятил краткую блогозапись этому событию.

Всё это является очередным шагом к появлению в Паутине такой трёхмерности, которая не потребует никаких плагинов, однако станет невозбранно поддерживать OpenGL (и, в частности, язык шейдеров GLSL ES). И эта трёхмерность будет кросс-платформенною. Браузеры, которые приуготавливаются понимать WebGL, поимённо перечислены на заглавной странице вики WebGL: это Apple WebKit, Google Chrome, Mozilla Firefox и Opera.

Практическим примером использования WebGL является джаваскриптовая библиотека X3DOM, поддерживающая использование сцен X3D внутри обычных вебостраниц.
Всего голосов 39: ↑25 и ↓14 +11
Просмотры 1.2K
Комментарии 17

Джаваскриптовый эмулятор Сommodore 64

JavaScript *
Опрос показал, что около 42% читателей Хабрахабра используют рождественские выходные дни для того, чтобы потрудиться над своими проектами.

Во блоге Ajaxian сообщают, что точно таким же манером использовал свои выходные разработчик по имени Тим де Конинг, который портировал Flash-версию эмулятора Commodore 64 на чистый джаваскрипт, работающий с холстом (<canvas>). Получился проект, названный им jsc64. Выглядит вот как:

[скриншот jsc64]

Исходный код раздаётся на GitHub. Там есть даже plugin для jQuery.
Всего голосов 14: ↑9 и ↓5 +4
Просмотры 984
Комментарии 3

Всплывающая подсказка с живым видео демонстрирует HTML5 video, и холст (canvas), и Ext

IT-стандарты *
Перевод
[всплывающая подсказка с живым видео]
Дэвид Дэвис из Ext не просто клёво зовётся, но и делает клёвые штуки :) Последняя его блогозапись демонстрирует и объясняет слияние HTML5-элемента <video> с поддержкою холста (<canvas>) по мере того, как он создаёт всплывающую подсказку с живым видео.

В этом примере используется рабочий web-стол Ext JS, и созданный код поставляет специальную панель, способную доставлять видео, а затем попросту захватывается видеокадр, и размер его уменьшается до размеров всплывающей подсказки:
win.ctx.drawImage(win.videoEl, 0, 0, win.tip.width, win.tip.height);
Весьма мило устроено.
Всего голосов 57: ↑40 и ↓17 +23
Просмотры 5.3K
Комментарии 21

18 Наиболее ожидаемых концептов компьютеров

Дизайн
Перевод
image
С одной стороны, концепты — это удивительная вещь, с другой — разочарование. Они прекрасны, потому что дают нам представление о будущем и подталкивают свою отрасль к инновациям и нестандартным решениям, но мы не состоянии приобрести их прямо сейчас, что не может не расстраивать. Единственное, что мы можем сделать, это положить деньги в банк и ждать, пока они выйдут.

Под катом очень много фотографий
Всего голосов 75: ↑62 и ↓13 +49
Просмотры 1.2K
Комментарии 68

No Canvas

Ненормальное программирование *
Возможно, это лучше перенести в «Я пиарюсь» или «JavaScript» (принимаются предложения). А может, стоит оставить всё как есть. Тем не менее...

3D с z-buffer-ом, субпиксельной точностью и освещением по Гуро на javascript? Да кто угодно сможет это сделать, используя canvas!

Можно долго и вкусно описывать преимущества канваса, но статья не про это; не менее интересно
посмотреть, чем же канвас плох.

Так чем же?
Всего голосов 71: ↑63 и ↓8 +55
Просмотры 2.3K
Комментарии 42

Измерение скорости работы с холстом (canvas)

Браузеры
Перевод
[скриншот FreeCiv]

Команда Freeciv.net измерила скорость работы кода их игры на холсте. Это единый итог, и проверяет он больше, чем сам холст, так как в игре действует масса кода. Поэтому в итоге измерялась и скорость исполнения конкретной ветви джаваскрипта, и скорость рендеринга на холсте.

Вот результаты:

[скриншот результатов]

Читать дальше →
Всего голосов 69: ↑45 и ↓24 +21
Просмотры 435
Комментарии 40

Ambilight для тэга <video>

Чулан
via Ajaxian

Сергей Чикуёнок сделал ambilight для HTML5 тэга <video>

По этой ссылке можно посмотреть на эффект.
А по этой — посмотреть, как это было сделано.

Upd. для непонятливых: это просто программерское упражнение, Just for fun…
Всего голосов 24: ↑18 и ↓6 +12
Просмотры 389
Комментарии 11

ProgressBar — Javascript Canvas2d

HTML *

Здравствуйте. Последнее время я достаточно часто имею дело с JavaScript-canvas, особенно написание всяких игрушек, которые требовательны к трафику в силу необходимости загрузки множества картинок.
Обычно сначала загружается около 50-100кб сжатого JavaScript, после чего — энное количество картинок(например, 500кб, 2мб, 10мб и т.п.) и только после этого запускается сама игра. Можно, конечно, загружать по ходу, но отсутствие текстур врядли порадует игрока.
Потому я решил, что необходимо сделать какой-то приличный, симпатичный, легко-настраиваемый(чтобы быстро менять от проекта к проекту) прогресс-бар, но, обязательно без использования картинок. Под катом исходники под лицензией LGPL, небольшая инструкция, как это сделать и внизу статьи — ссылка на результат.
Читать дальше →
Всего голосов 90: ↑85 и ↓5 +80
Просмотры 5.3K
Комментарии 31