Javascript Raphael JS-创建自定义进度条

我正在尝试创建自定义进度条，如下图所示：

我认为创建此类组件的最佳选择是使用JavaScript和SVG或Canvas，现在我正在尝试用Raphael JS创建它

window.onload = function() {
var paper = Raphael("holder", 500, 500);
var border = paper.path("M177.726,35.14c-6.51-19.56-24.73-30.02-46.369-35.14l-4.061,3.7c16.59,5.44,29.609,15.21,33.25,30.37c6.891,28.729-26.721,55.2-70.56,55.2c-43.84,0-77.45-26.471-70.55-55.2c3.64-15.16,16.65-24.93,33.24-30.37L48.616,0c-21.64,5.12-39.86,15.58-46.37,35.14c-12.83,38.52,31.03,74,87.74,74C146.696,109.14,190.556,73.66,177.726,35.14z M89.986,107.014c-33.546,0-64.678-13.115-79.311-33.411C2.173,61.81-0.044,48.742,4.263,35.812C9.725,19.401,24.444,8.14,48.018,2.332l0.595,0.542C31.43,9.313,20.658,19.875,17.369,33.574c-2.601,10.831,0.055,21.67,7.682,31.346c12.873,16.331,37.755,26.477,64.935,26.477c27.177,0,52.06-10.145,64.936-26.475c7.63-9.676,10.29-20.516,7.691-31.348c-3.289-13.696-14.065-24.26-31.253-30.701l0.594-0.542c23.574,5.809,38.293,17.069,43.754,33.48c4.307,12.93,2.09,25.998-6.412,37.791C154.663,93.898,123.532,107.014,89.986,107.014z");
var fill = paper.path("M173.587,33.481C168.126,17.069,153.407,5.809,129.833,0l-0.594,0.541c17.188,6.441,27.963,17.004,31.252,30.701c2.6,10.832-0.061,21.672-7.691,31.348c-12.875,16.33-37.758,26.475-64.936,26.475c-27.18,0-52.063-10.146-64.936-26.477c-7.627-9.676-10.283-20.516-7.682-31.346C18.536,17.543,29.309,6.981,46.491,0.542L45.896,0C22.322,5.809,7.603,17.069,2.142,33.48c-4.307,12.931-2.09,25.998,6.412,37.791c14.633,20.296,45.764,33.411,79.311,33.411s64.678-13.115,79.311-33.411C175.677,59.478,177.894,46.411,173.587,33.481z");

border.attr({
    fill: "#00FFFF",
});

fill.attr({
    fill: "#99FF00",
});
}

我想知道这是否可能，或者这是一件难以置信的困难的事情，或者拉斐尔不是做这件事的最佳工具，我对拉斐尔很陌生，我所做的就是用拉斐尔JS重新创建形状

window.onload = function() {
var paper = Raphael("holder", 500, 500);
var border = paper.path("M177.726,35.14c-6.51-19.56-24.73-30.02-46.369-35.14l-4.061,3.7c16.59,5.44,29.609,15.21,33.25,30.37c6.891,28.729-26.721,55.2-70.56,55.2c-43.84,0-77.45-26.471-70.55-55.2c3.64-15.16,16.65-24.93,33.24-30.37L48.616,0c-21.64,5.12-39.86,15.58-46.37,35.14c-12.83,38.52,31.03,74,87.74,74C146.696,109.14,190.556,73.66,177.726,35.14z M89.986,107.014c-33.546,0-64.678-13.115-79.311-33.411C2.173,61.81-0.044,48.742,4.263,35.812C9.725,19.401,24.444,8.14,48.018,2.332l0.595,0.542C31.43,9.313,20.658,19.875,17.369,33.574c-2.601,10.831,0.055,21.67,7.682,31.346c12.873,16.331,37.755,26.477,64.935,26.477c27.177,0,52.06-10.145,64.936-26.475c7.63-9.676,10.29-20.516,7.691-31.348c-3.289-13.696-14.065-24.26-31.253-30.701l0.594-0.542c23.574,5.809,38.293,17.069,43.754,33.48c4.307,12.93,2.09,25.998-6.412,37.791C154.663,93.898,123.532,107.014,89.986,107.014z");
var fill = paper.path("M173.587,33.481C168.126,17.069,153.407,5.809,129.833,0l-0.594,0.541c17.188,6.441,27.963,17.004,31.252,30.701c2.6,10.832-0.061,21.672-7.691,31.348c-12.875,16.33-37.758,26.475-64.936,26.475c-27.18,0-52.063-10.146-64.936-26.477c-7.627-9.676-10.283-20.516-7.682-31.346C18.536,17.543,29.309,6.981,46.491,0.542L45.896,0C22.322,5.809,7.603,17.069,2.142,33.48c-4.307,12.931-2.09,25.998,6.412,37.791c14.633,20.296,45.764,33.411,79.311,33.411s64.678-13.115,79.311-33.411C175.677,59.478,177.894,46.411,173.587,33.481z");

border.attr({
    fill: "#00FFFF",
});

fill.attr({
    fill: "#99FF00",
});
}

---

最好使用KineticJS或任何其他有助于您快速开始几何图形及其操作的API使用Canvas。因为你可以很容易地使用颜色转换来获得你想要看到的进度。如果您查看画布而不是SVG，这将是一个很好的方法。

如果您可以将填充分解为多个部分。。说十件吧

然后，第一块将是10%必须向上到左边。 然后你就可以填那个了。。你要什么颜色都行

然后你可以用你想要的任何颜色填充下一个

然后，您可以将这些路径放入一个数组中，迭代该数组并填充它们，而不是使用单个填充路径

然后，如果迭代到例如第三个元素并填充。。你将填满整个进度条的前十分之三

当然，你可以把它分成任意数量，你可以有一百个或其他任何数量

然后用一个名为“fill_progress_bar（{“up_to”：30}）”的函数来结束它 例如，它会将进度条填满30%

您还可以创建一个函数“fill_bar_part（{'number'=>3'，with_color'：'red'}），例如，它将用红色填充进度条的第三个十分之一。这样，你也可以很容易地用你想要的任何颜色组合填充进度条。这并不是说没有必要，而是它显示了你现在对进度条的控制程度

一旦设置完成，你基本上就完成了，再也不用担心这个了

---

但是，请记住在编写程序时写下算法，因为现在看起来很明显的东西可能在六个月后就不那么明显了。或者对其他开发人员来说，在这个问题上。

图像没有加载。你想让我签入小提琴吗？它为我加载。这是图像的链接