Индикатор прогресса с помощью HTML5 Canvas

[YoungSkipper]

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

Я конечно за прогресс и если выбирать делать прогресс бар так или на флеше, то лучше так. Но блин почему бы не нарисовать бы две картинки и не выводить их поверх друг друга?? Даже просто по размеру это будет меньше, чем ваш код (без сжатия правда). А если бы внедрили 9patch images — то и размер был бы меньше.

[syo]

с точки зрения морочиться, встраивая флеш в страницу и потом передавать ему параметры — верно — флеш тут как обуза, но в условиях чистого эксперимента (в обоих случаях используем только draw-функции) — синусы и арктангенсы явно затормозят проц и посадят батарею быстрее флеша (у которого давно присутствует методы типа drawRoundRectangle...).

[TheShock]

Можно отрисовать в буфер, а потом оттуда рисовать две картинки. ProgressBar в LibCanvas так и делает.

[kirilloid]

Сомневаюсь, что тормозить будут синусы и арктангенсы, если они не вычисляются в цикле. (Я имею ввиду за один этап обновления прогресса).
На крайняк можно делать precompute перед «сборкой». Т.е. дописать в код таблицу значений.

Но вообще картинами будет быстрей. Тем более, там можно ограничиться вообще одной картинкой + css-slicing.

[black_bunny]

согласен, с изображениями было бы быстрее, но для того чтобы поменять цвет/размер/другие параметры пришлось бы рисовать новые картинки, а здесь можно быстро поэкспериментировать с этим,
на самом деле можно даже такой прогресс-бар сделать с помощью html+css3, я это тоже попробовал, но разметка иногда ведёт себя неадекватно)

[TheShock]

но для того чтобы поменять цвет/размер/другие параметры пришлось бы рисовать новые картинки, а здесь можно быстро поэкспериментировать с этим,

Ну и отрисовали бы, в чём проблема? ;)

[black_bunny]

Да нет никакой проблемы, просто в данном случае я экспериментировал с canvas)

[TheShock]

Дык я в контексте Canvas и говорю. Отрисовывать все каждый раз — моветон.
Смотрите LibCanvas.Utils.ProgressBar:
Когда изменен стиль через setStyle вызывается preRender, который рендерит в буфер this.line прогрессбар. Это происходит только при изменении параметров.

Каждый же ж кадр вызывается метод drawLine, который рендерит буфер на холст.

[black_bunny]

Спасибо, теперь понял

[YoungSkipper]

Процы тода, а вот батарейки отстают.

[Artoha]

Охрененная штука. Давно искал, как это реализовать. Но вы тут мне помогли. Зачет!

[Demon2]

Великолепно!

[black_bunny]

Спасибо

[andre_colonel]

оно здорово конечно, но почему-то (скорее-всего оправданно), по быстродействию легче вывести пару картинок чем вычислять всякое и рисовать линии. не так давно пытался написать игру с как бы векторной графикой. и оказалось что картинка рисуется побыстрее 20-ти линий. хотя, правда я сильно не вникал — лыжи не едут или у меня не слава богу

[andre_colonel]

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

[andre_colonel]

ImageData кажется

[TheShock]

Блин, ну отрендерите один раз его в буфер, а потом можно выводить те самые две картинки. Так и надо делать.

[EvgeniyKirov]

Можно ещё, наверное, средствами CSS3 попробовать.

[black_bunny]

Да, я это тоже попробовал, но пока так и не получилось сделать правильное заполнение при ширине меньше радиуса, возможно из-за того что не очень хорошо знаю вёрстку

[widowmaker]

Синяя полоска должна быть всегда полной длины (100%) и находится в элементе с overflow: hidden, шириной с прогресс :)

[black_bunny]

Неплохо, а можно ли на CSS3 сделать правый край не закруглённым? Без картинок

[kirilloid]

Эммм. Ес-сно, можно.
border-radius: 50% 0 0 50%;

[black_bunny]

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

[EvgeniyKirov]

Можно поставить overflow: hidden для контейнера, тогда будут скругляться.

[black_bunny]

В фаерфоксе по крайней мере точно не будет
смотрите http://stackoverflow.com/questions/1280339/have-border-radius-cover-inner-divs

[EvgeniyKirov]

Жаль :(

[widowmaker]

Можно например так

[black_bunny]

Спасибо! Поместить полностью нарисованный прогресс в абсолютный div с overflow hidden — сразу не додумаешься

[bolk]

Через SVG не проще было?

[black_bunny]

возможно проще, я с SVG мало работал, хотелось поэкспериментировать с canvas

[TheShock]

SVG — тормоз.

[kirilloid]

js-canvas без аппаратного ускорения будет прям сильно быстрей? «Не верю!» — хочу результаты тестов.

[TheShock]

Ага. Значительно.

[TheShock]

И да, посмотрите на рынок SVG-приложений. Все — глючащие до безобразия (тот же Рафаель).
И при всей бедноте игр на Canvas игры на SVG почему-то еще беднее ;)

[shushu]

а зачем напрягать процессор лишней ерундой?
если можно обойтись, в большей степени, css. Вот свёрстано на коленке
pastehtml.com/view/1d8jg4e.html
если еще сделать «тень» да цвета подобрать — выйдет не хуже, да и тормозить меньше будет…

[shifttstas]

Ну вообще как бы выглядет ваш прогресс бар страшно, в у автора топика — симпотично, при запуске его в Chrome нагрузка ЦП выше 10% не поднимается, еще бы проценты у прогресбара были бы по середине а не плавали и было бы супер

[Zada]

Скоро будем использовать для этих целей спец. тег progress. Пока работает (визуально отображается) только в webkit, но стоит ждать, кода в 1050 раз меньше
pastehtml.com/view/1d8jlzi.html

[TheShock]

Ничего так. А стилизировать его можно?

[Zada]

Нет.

На самом деле, я не очень рад, что webkit имеет такую визуальную поддержку. Не факт, что другие сделают что-то подобное.

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

[Leeb]

Не только. Opera 11.01 нарисовала. Правда, не знаю, насколько правильно (ничего вебкитного под рукой нет).

[Imenem]

Результаты абсолютно разные. Значит для использования тег еще не годится.
Опера 11

Chrome 9

[Imenem]

Хотя зря я так, размеры с помощью CSS удалось привести к одному виду. Цвета нет.

[barev]

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

[TheShock]

Так часто вижу статьи на Хабре про canvas-progressbar. Сам такую писал)

[homm]

Вместо «Your browser does not have support for canvas» лучше написать «Operation in progress…».

[bestfriend]

habreffect.ru/files/743/6397b8e2c/PrtScn20110215093914.png

android phone

[voicer]

А в чем сложность, используя этот пример, добавить callback от какого-нибудь загрузчика?
Или вам лишь бы придраться?

[Akenfold]

Плавности бы непомешало. Слошком резко меняется положение прогресса, из-за создаётся неприятное ощущение.
А вообще, интересная это идея. И реализация понравилась.

[black_bunny]

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

[nerva]

Слушайте, но это ведь жесть. Я далек от веб разработки и разработки вообще, но чтобы сделать простой прогресс-бар надо столько кода написать! Определенно что-то не то с прогрессом…