用不同的颜色填充 canvas 路径的一部分

Question

我已经在 canvas 中创建了一条绿色路径，如下所示：

_{（来源：shrani.si）}

我不得不使用 4 个 lineTo() 和 4 个 quadraticCurveTo() 函数。我想构建某种进度条，看起来像这样：

_{（来源：shrani.si）}

在 canvas 中是否有任何简单的解决方案？我的目标是拥有一个 JavaScript 函数，可以根据进度百分比更新 canvas 形状。我知道我可以在绿色形状之后再制作一个蓝色形状，但我该如何计算它的适当长度呢？非常感谢任何帮助:)

Answer 1

您的圆角矩形由 9 个子路径组成：

1. 上边框的右半部分，
2. 右上角，
3. 右边框，
4. 右下角，
5. 下边框，
6. 左下角，
7. 左边框，
8. 右上角，
9. 上边框的左半部分。

令 w 为矩形的宽度，h 为矩形的高度，r 为边框半径.

路径总长度约为*:

长度=(w - 2r)*2 + (h -2r)*2 + 2πr

将这个长度乘以一个百分比得到一个子长度，这是给出蓝色路径的长度。每个矩形的子路径的长度如下：

• 1, 9: (w-2r)/2
• 2, 4, 6, 8: πr/2
• 3, 7: (h-2r)
• 5: (w-2r)

现在，使用子长度，按照上面给出的顺序遍历每个子路径。对于每个子路径：

• 如果子长度大于或等于子路径的长度，绘制整个子路径，并减少 子路径长度的子长度。
• 否则，根据长度绘制部分子路径。这将涉及计算部分直线或部分弧，与计算更复杂的路径相比，这相对容易。然后停止绘制。

* 我说 "about" 因为您使用二次曲线来近似拐角处的圆弧。顺便说一下，您可以使用 arc 方法代替这些角。