创建javascript倒计时

Question

大家好日子。

我需要在js中创建一个图形倒计时。计时器的算法很普通。但是我需要创建一个充满颜色的圆圈（让我们说绿色，无关紧要），当计数器向下时，圆圈会填充另一种颜色。所以我基本上需要做的是填充一个颜色的圆圈。

首先我想模拟圆圈内的一些线条（从中心到边缘）并用它们填充。问题是如何生成线......我得出的结论是，我应该生成点来生成线来填充圆圈，即使代码很容易编写听起来像资源吃的人。

第二种选择是使用绘图库，但我担心它会做同样的事情。

那么......任何想法如何实现这一点而不浪费太多资源？

注意：圈子必须以循环方式填写...例如在游戏中重复技能。 （就像一个时钟）

Answer 1

如何使用html5 canvas：使用它可以绘制弧形。

请参阅http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/

Answer 2

我能想到的最好的方法是使用Raphael graphis库，它允许你的代码绘制SVG（或旧IE上的VML）。看看这个演示的来源（基本上可以做你想要的）：

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 3

查看此帖子（使用画布）：Using jQuery / HTML5 to animate a circle

或者，如果你想用一个简单的CSS自己做，HTML：

1. 您可以在其中制作带透明圆圈的图像。
2. 使用位置相对值和图像大小以及圆圈的默认颜色
创建一个div
3. 使用叠加背景颜色制作div，绝对定位宽度100％底部0。
4. 制作一个div，其中图像为背景图像宽度100％高度100％（因此图像超出默认背景颜色。

当计时器退出时，你知道它的百分比是多少，你可以改变你在第3步中所做的div的高度。但你不会在线上看到任何角度。

Answer 4

我想你可能会在这里找到你想要的东西：

http://dev-tips.com/featured/css-tip-how-to-make-ircles-without-images

有一个关于如何使用css3创建圈子的完整教程，它在旧版浏览器中不能很好地工作。