如何使用CSS3、HTML5、SVG和Jquery创建不规则曲线？

我正在尝试制作一条不规则的曲线，以便在我的网站上显示进度图。我用jQuery试过了，我成功地得到了正弦波，但我想得到一条不规则的波形线，如下图所示。我怎样才能做到呢

请参见下图。

html代码

jQuery代码

var my_canvas=$（“#my_canvas”）.get（0）；
var gctx=my_canvas.getContext（“2d”）；
gctx.stroke（）；
gctx.beginPath（）；
gctx.moveTo（10125）；
gctx.线宽=1；
gctx.strokeStyle='#f00040'；
var x=[]；
变量y=[]；
对于（var angle=0；angle我将这样做：为了绘制曲线，我需要一组点。我将使用二次bezier曲线，其中点（第一个和最后一个除外）是控制点。
因为显然你需要为笔划设置动画，所以我使用SVG。对于动画，我使用CSS，如下所述：


//用于绘制曲线的点数组
设点=[
{
x:10，
y:24
},
{
x:70，
y:110
},
{
x:117，
y:10
},
{
x:130，
y:142
},
{
x:200，
y:70
},
{
x:270，
y:143
},
{
x:320，
y:24
}
];
//使用点作为控制点绘制曲线的函数
函数绘制曲线（点）{
//找到第一个中点并移动到它
var p={}；
p、 x=点[0].x；
p、 y=点[0].y；
设d=`M${p.x}，${p.y}`；
//曲线通过其余部分，在每个中点停止
对于（变量i=0；i

#base{
冲程：#ccc；
笔画宽度：5px；
填充：无；
}
#使用{
笔画：黑色；
笔画宽度：1px；
填充：无；
动画：向前冲5秒；
}
@关键帧破折号{
到{
笔划偏移：0；
}
}

当你说“绘制”时，你指的是动画吗？谢谢你指出，我已经纠正了这个问题。进度量和/或计时是否准确有多重要？如果你只对指示正在加载的视觉提示感兴趣，最好使用“不确定”像旋转的圆圈或类似的精灵一样的图形。但是如果强制要求进度条的位置有意义，这将是复杂度的一个飞跃。如果你对循环直到任务完成的基本动画感到满意，请查看一些灵感。如果需要以编程方式设置进度量，这将不会有帮助（例如，沿曲线三分之二的距离表示约65%的完成）。您可以在运行时通过CSSOM修改
@关键帧
，但最好完全通过JavaScript设置进度位置。有关我几年前准备的解决方案，请参阅（或用于spiffy ES6+版本的函数。请注意，具有非连续切线（尖角或所谓的“bezier角”）的中点将需要特殊处理。知道如何创建“goop”吗从页面顶部开始变薄，即当波浪边缘从顶部下降到屏幕底部时，波浪在随机位置延伸（）？我对画布非常缺乏经验，但我一直在阅读，四次贝塞尔曲线在我看来是要使用的曲线类型？我想做的是生成一个随机波，并在页面加载时使用它来滴漏和暴露内容，因为起点应该是四次贝塞尔曲线子路径中的最后一个点，doe它可以简单地归结为将一组四边形链接在一起，然后随机调整每个四边形的控制点？请阅读。尝试一些。如果你不想问其他问题。我很乐意提供帮助。
<canvas height="500" width="600" id="my_canvas"></canvas>

var my_canvas=$('#my_canvas').get(0);
var gctx = my_canvas.getContext("2d");
gctx.stroke();
gctx.beginPath();
gctx.moveTo(10, 125);
gctx.lineWidth=1;
gctx.strokeStyle= '#f00040';
var x = [];
var y = [];
for (var angle = 0; angle <590; angle+=1){
gctx.lineJoin = 'round';
y.push(125 - 120*( Math.sin(( Math.PI/180 ) * angle)));
x.push(10 + angle);
gctx.lineTo((10 + angle),((125 - 120*( Math.sin(( Math.PI/180 ) * 
angle)))));
}
gctx.stroke();