none
Отрисовка круга из двух изображений и анимация сектора круга (JavaScript) RRS feed

  • Общие обсуждения

  • Есть 2 изображения в виде круга, например, в формате png. Необходимо нарисовать круг на web-странице, чтобы был виден сектор первого изображения (угол сектора задаётся, может изменяться), а остальная часть круга(оставшийся сектор) - из второго изображения.

    Как такое можно реализовать? Как анимировать? Анимация, когда мы задаём, что угол сектора должен измениться, например, увеличиться на 50 градусов и он плавно увеличивается.

    Немаловажна кроссбраузерность.

    1 ноября 2011 г. 16:52

Все ответы

  • Если хотя бы внутренний круг (сектор) однотонный, то можно взять border-radius, 3 div'а, jquery animate и учебник по геометрии. К ИЕ ниже 9-го и оперы (ниже какой версии не помню) для border-radius потребуется еще решение.

    Или же SVG, canvas, jquery animate.

    1 ноября 2011 г. 18:17
  • Если хотя бы внутренний круг (сектор) однотонный, то можно взять border-radius, 3 div'а, jquery animate и учебник по геометрии. К ИЕ ниже 9-го и оперы (ниже какой версии не помню) для border-radius потребуется еще решение.

    Или же SVG, canvas, jquery animate.

    Как это сделать с SVG?
    1 ноября 2011 г. 18:23
  • Возьмите лучше canvas, это более HTML 5 :) Для IE юзайте exCanvas. + jquery animate (или мб другую либу).

    Сходу затрудняюсь готовое решение предоставить, не настолько хорош :)

     

    1 ноября 2011 г. 18:33
  • Возьмите лучше canvas, это более HTML 5 :) Для IE юзайте exCanvas. + jquery animate (или мб другую либу).

    Сходу затрудняюсь готовое решение предоставить, не настолько хорош :)

     

    Не все браузеры поддерживают HTML5
    1 ноября 2011 г. 18:42
  • Уважаемый пользователь!

    В вашей теме отсутствует активность в течение последних 5 дней. При отсутствии каких-либо действий в течение 2 последующих дней, тема будет переведена в разряд обсуждений. Вы можете возобновить дискуссию, просто оставив сообщение в данной теме


    Для связи [mail]
    8 ноября 2011 г. 10:18
    Модератор
  • В IE6-8 - VML, в остальных SVG. Либо можно Raphaeljs подрубить, там и анимация уже есть.
    • Изменено kidar2 11 ноября 2011 г. 4:58
    11 ноября 2011 г. 3:27