创建javascript倒计时

大家好

我需要在js中创建一个图形倒计时。计时器的算法是普通的。但是我需要创建一个用颜色填充的圆圈（比如说绿色，没关系），当计数器下降时，圆圈会被另一种颜色填充。所以我基本上需要做的是用颜色填充一个圆圈

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

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

所以。。。如何在不浪费太多资源的情况下实现这一点

注意：圆圈必须以圆形方式填充。。。比如游戏中的技能重用。（就像一个时钟）

查看这篇文章（使用画布）：

或者，如果您想自己使用简单的CSS、HTML：

您可以制作一个带有透明圆圈的图像

使用相对位置、图像大小以及圆的默认颜色制作一个div

使用叠加背景色制作一个div，绝对定位宽度100%底部0

制作一个div，其中图像为背景图像宽度100%高度100%（因此图像高于默认背景颜色）

---

当计时器开始计时，并且您知道它的百分比时，您可以更改在步骤3中所做的div的高度。但是您不会在线条上看到任何角度。

如何使用html5画布：使用它可以绘制圆弧

---

请参见

我想您可能会在这里找到您想要的：

---

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

我能想到的最佳方法是使用graphis库，它允许您的代码绘制SVG（或旧IE上的VML）。请查看此演示的源代码（基本上满足您的需要）：

理解代码的关键是理解这一行：

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

理解这一行的关键是首先理解SVG路径规范：

---

您好，您可能想看看用于制作游戏的javascript库。它们已经对性能进行了大量优化，因此可能会为您提供一个良好的启动。Ty…我尝试找到一些。有任何示例吗？根据您需要支持的浏览器，

似乎非常适合于此。您可以在现代浏览器中创建圆圈（支持CSS3“border radius”属性）创建一个特定的宽度和高度（如100px），然后将其“border radius”设置为该值的一半（50px）.Bingo，即时循环。颜色与CSS一样微不足道。编辑的问题。循环必须以循环方式填充，而不是从上到下…这很微不足道。如果我正确理解你想说的话，这将从上到下而不是以循环方式填充我的循环。（可能这是我的错，我编辑问题是为了说明这一点）是的，这是自上而下的，但我添加了一个链接到圆形填充。