Javascript 我如何用HTML制作一个定制的（形状非常奇怪的进度条）？

是否可以在HTML中创建（实际上是一个进度条），或者在HTML中创建任何类型的方法，通过将轨迹填充到某一点来模拟进度条的效果？我还需要能够控制轨道的填充率。请参见图像示例：

注意：轨迹曲线将具有曲线边的零件

这可以简单地在flash中设置动画，但是，出于其他目的，这需要严格使用HTML5或Javascript来完成。这可能吗

---

我甚至无法想象如何实现这一点。

是的，用html和javascript实现这一点是可能的

有很多方法可以实现这一点

最简单的是100张图片，每完成1%

另一种方法是使用许多具有固定大小、位置和背景颜色的div，然后在那里切换可见性

第三种方法是使用canvas元素并在进度发生时绘制到画布上

如果需要第四种方法，可以使用SVG来实现此效果。

请参阅和

您可以定义路径，然后显示它。这就像使用画布加载gif一样，但您应该能够修改js以将其显示为进度条

var square = new Sonic({
    width: 100,
    height: 100,
    fillColor: '#000',
    path: [
        ['line', 10, 10, 90, 10],
        ['line', 90, 10, 90, 90],
        ['line', 90, 90, 10, 90],
        ['line', 10, 90, 10, 10]
    ]
});

square.play();

document.body.appendChild(square.canvas);

---

我可能会使用某种循环例程来生成50个不同的css类，然后您只需设置一个值，css就可以完成其余的工作。在SVG中写下背景路径，使用

path.getPointAtLength

获取每.1%左右的点的位置，使用这些点的正确数量创建前景路径。这正是我想要的，非常感谢！