使用HTML，CSS或javascript的动画循环倒数计时器

Question

我想创建一个划分为4个季度的圆圈，然后将每个季度细分为多个细分。每个季度将有不同的背景颜色（或背景图像）。

圆圈将作为倒计时器，每个片段将持续约5秒钟（参见附图，了解我正在寻找的内容）。只有在发出javascript命令时才会启动计时器（也应该可以暂停，并回退计时器）。

片段之间的过渡不一定是平滑动画（即过渡到片段可能只是涉及前一段背景颜色变白）

有几点需要注意：
- 每个象限中的段数可以更改，因此每个段的大小必须灵活。 - 象限的顺序可以改变（即代替蓝色，橙色，红色，绿色...我们可以有橙色，红色，紫色等等） - 它必须在iPhone和现有的Android手机上运行（我在看Raphael和SVG，但Android上似乎不支持此功能。）

我对如何最好地解决这个问题感到茫然，所以很高兴听到建议甚至看到例子（虽然我没有能够提供任何来源）

Answer 1

我认为实现所需结果的最佳方法是使用 canvas 元素并使用javascript绘制它，或者使用动画图像以及静态图像和一些JS来切换这两种类型。

Answer 2

你见过Raphaël JS吗？它非常适合图表。我不确定具体细节，但这应该让你开始。