Создать javascript обратный отсчет

Question

Добрый день всем.

Мне нужно создать графический отсчет в js.Алгоритм для таймера обычный.Но мне нужно создать круг, заполненный цветом (скажем, зеленый, не имеет значения), и пока счетчик идет вниз, круг заполняется другим цветом.Итак, что мне в основном нужно сделать, это заполнить круг цветом.

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

Итак ... есть идеи, как реализовать это, не тратя слишком много ресурсов?

Примечание:Круг должен быть заполнен по кругу ... например, повторное использование навыков в играх.(как часы)

Answer 1

Лучший способ, о котором я могу подумать, - это использовать графическую библиотеку Raphael , которая позволяет вашему коду рисовать SVG (или VML на более старых версиях IE). Посмотрите на источник этой демонстрации (которая в основном делает то, что вы хотите):

http://raphaeljs.com/polar-clock.html

Ключом к пониманию кода является понимание этой строки:

path = [["M", 300, 300 - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];

И ключ к пониманию этой строки - сначала понять спецификацию пути SVG:

http://www.w3.org/TR/SVG/paths.html

Answer 2

Как насчет использования html5 canvas: с его помощью вы можете нарисовать дугу.

См. http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/

Answer 3

Я думаю, вы можете найти то, что ищете здесь:

http://dev -tips.com / featured / css-tip-how-to-make-ircles-без-изображений

Существует полное руководство по созданию кругов с использованием css3, оно не очень хорошо работает в старых браузерах, хотя.

Answer 4

Ознакомьтесь с этим постом (используя canvas): Использование jQuery / HTML5 для анимации круга

Или, если вы хотите сделать это самостоятельно с помощью простого CSS, HTML:

1. Вы можете сделать изображение с прозрачным кружком.
2. Создание div с позицией, относительной и размером изображения, и цветом круга по умолчанию
3. Создайте div с наложенным цветом фона, абсолютная ширина 100% снизу 0.
4. Создайте div, где изображение в качестве фонового изображения. Ширина 100% Высота 100% (чтобы изображение было поверх цвета фона по умолчанию.

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