Canvas Arc倒计时，具有不同样式的多个弧

Question

我用画布创建了一个“倒计时”弧。因此背景弧是半圆形的，并且顶部弧基于两个日期之间的时间“增长”。 （这个具体的例子是从7月1日到31日）。

一切都按预期工作，但我无法弄清楚如何分离弧形样式。

我通常是画布的新手，所以任何帮助都会受到赞赏。看看这里的小提琴：http://jsfiddle.net/gDQhR/2/

有问题的真实代码是：

        ctx.shadowBlur = 20;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.shadowColor = "rgba(255, 234, 93, .9)";

我只想将那个阴影应用到顶部弧线。我确信有一种更好的方法可以为每个弧组织样式，我认为将该样式应用于单个弧是关键。

非常感谢任何帮助，谢谢！

Answer 1

您可以通过设置：

停止应用阴影效果

ctx.shadowBlur=0;

Answer 2

也许更全面的答案是谈论save（）和restore（）：使用这两种方法你可以......好吧...保存画布的所有当前状态，然后你修改它（strokeStyle，字体，比例，...），之后，通过调用还原，您在之前保存的状态中使画布全新。

警告strokeStyle不能使用渐变，因此您必须绘制绘制环/环段的路径。

Rq 1：在上下文的特定部分定义了渐变，看起来除了绘图区之外  （约75,75）

Rq 2：一个好的处理方法可能是为每个数字构建一个中间函数，它可以帮助您理解/更改代码。