Javascript jQuery如何加载部分图像

我有个小问题。我需要创建圆形滑块，我没有找到任何可以帮助我的库，所以似乎我需要自己编写它。
这是我的问题：

我想创建如上图所示的内容，但我找不到加载部分渐变的方法，例如：

---

甚至可以在js中加载部分图像吗

如果您不需要动态替换图像，我建议您在Photoshop等图像工具中进行准备

如果你有一些图片需要替换，我会在Photoshop中准备它们，并通过javascript和css解决方案进行更改

---

否则我不知道。

我同意画布选项。 此外，根据您的想法，我建议您：

---

我定制了一个图像拨号本身，你可以设置显示部分的颜色。这可能不是您的全部解决方案，但理想情况下，它将为您指明正确的方向。

既然您正在寻求向后兼容，我将借鉴Bertrand的建议。您可以很容易地制作一个“精灵”图像，其中包含滑块的所有不同“阶段”（即，完成20%，完成40%，等等），并在不同的CSS类中引用它的每个阶段

---

这样，所有阶段都将作为页面加载时的一个图像加载，您可以使用JavaScript更新显示滑块的元素类，更新滑块的进度。

无法使用纯JavaScript加载图像的一部分。相反，您可以使用精灵图像并播放背景位置：

函数getBgPos（pct）{ 如果（pct<12.5）{返回'0'；} 如果（pct<25）{return'-100px 0'；} else如果（pct<37.5）{return'-200px 0'；} else如果（pct<50）{return'-300px 0'；} else如果（pct<62.5）{return'-400px 0'；} else如果（pct<75）{return'-500px 0'；} else如果（pct<87.5）{return'-600px 0'；} 如果（pct<100）{return'-700px 0'；} else{return'-800px 0'；} }; i=0； setInterval（函数（）{ jQuery（'#loader'）.css（'background-position'，getBgPos（i））； i+=12.5；如果（i>100）i=0； }, 500);

#加载器{
显示：块；
宽度：100px；
高度：100px；
背景：黄色url(https://i.stack.imgur.com/Xsf4k.png)不重复0；
}

您如何显示该图像，是否使用了

？我想您可以使用canvas元素并在图像上创建某种遮罩来实现这一点。不完全确定如何使用，但我确信这是可能的。@Bergi它需要与IE7兼容，所以我认为我不能使用canvas。我不知道会很难很快把这件事做完。可能会让你走上正确的道路。将有一个水平滑块，其值将显示在该圆形滑块上。所以它需要动态的方法（这是我的学校项目）好吧，理论上，你仍然可以这样做。您只需要在sprite文件中为滑块的每个可能值设置一个状态。但是，如果滑块从1移动到100，并且可以在第1步中上下移动，则会产生非常大的精灵。不过，大精灵文件并不少见。就动态更改它而言，这实际上相当简单（不过，还是大的）。您将为每个滑块点创建样式，并使每个点的值成为相应类名的一部分。这样，您就可以将滑块值直接输入到更改类的函数中，以作为更新的类名的一部分。