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

Question

我已经在画布上创建了一条绿色路径，如下所示：

already made path http://shrani.si/f/2/125/2prKT5FY/deletemestackoverflow.png

我必须使用4 lineTo（）和4 quadraticCurveTo（）函数。我想构建一些看起来像这样的进度条：

the goal http://shrani.si/f/2m/BL/1Spxusi3/deleteme2stackoverflow.png

帆布有什么简单的解决方案吗？我的目标是拥有一个JavaScript函数，可以根据进度百分比更新画布形状。我知道我可以在绿色之后制作另一个蓝色的形状，但我究竟该如何计算它的合适长度呢？任何帮助非常感谢：）

Answer 1

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

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

让 w 为矩形的宽度， h 为矩形的高度， r 为边界半径。

路径的总长度约为*：

长度=（w-2r）* 2 +（h -2r）* 2 +2πr

将此长度乘以百分比会给出一个sublength，即给出蓝色路径的长度。每个矩形的子路径都具有以下长度：

• 1,9：（w-2r）/ 2
• 2,4,6,8：πr/ 2
• 3,7：（h-2r）
• 5：（w-2r）

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

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

*我说“约”，因为你使用二次曲线逼近角上的弧。顺便说一下，您可以使用arc方法替代这些角落。