Pull to refresh
  • by relevance
  • by date
  • by rating

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

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

Читать дальше →
Total votes 3: ↑3 and ↓0 +3
Views 806
Comments 0

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

Image processing *Machine learning *Software Video cards IT-companies


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

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

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

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

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

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

Читать дальше →
Total votes 27: ↑24 and ↓3 +21
Views 1.7K
Comments 22

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

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

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

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

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

canvas в IE и Firefox
Читать дальше →
Total votes 23: ↑13 and ↓10 +3
Views 1K
Comments 14

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

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

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

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

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

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

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

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

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

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

«Berts Breakdown»

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

[Berts Breakdown]
играть сейчас же
Total votes 26: ↑13.5 and ↓12.5 +1
Views 495
Comments 9

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

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

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

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

IT Standards *
[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 внутри обычных вебостраниц.
Total votes 39: ↑25 and ↓14 +11
Views 1.2K
Comments 17

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

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

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

[скриншот jsc64]

Исходный код раздаётся на GitHub. Там есть даже plugin для jQuery.
Total votes 14: ↑9 and ↓5 +4
Views 984
Comments 3

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

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

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

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

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

Под катом очень много фотографий
Total votes 75: ↑62 and ↓13 +49
Views 1.2K
Comments 68

No Canvas

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

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

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

Так чем же?
Total votes 71: ↑63 and ↓8 +55
Views 2.3K
Comments 42

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

Browsers
Translation
[скриншот FreeCiv]

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

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

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

Читать дальше →
Total votes 69: ↑45 and ↓24 +21
Views 436
Comments 40

Ambilight для тэга <video>

Lumber room
via Ajaxian

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

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

Upd. для непонятливых: это просто программерское упражнение, Just for fun…
Total votes 24: ↑18 and ↓6 +12
Views 390
Comments 11

ProgressBar — Javascript Canvas2d

HTML *

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