Javascript 使用动画将画布转换为svg

我一直在用a来制作动画天气符号。我现在正在做的是SVG版本的，不知道哪种方法可能是最好的

我画了一个云的轨迹/路径，static（），因为原始的云（）基本上有5条曲线，它们在旋转时会膨胀和收缩

我认为可能的方法是：

• 制作5个圆，使用破折号仅显示所需的圆弧，然后设置圆的动画和展开/收缩

• 制作5，并以某种方式使其膨胀和收缩

• 使用5个动画制作情感动画

有更好的逻辑吗？任何关于如何思考这个逻辑的建议都是很好的

使用SE应用程序，与上面的JSFIDLE示例相同：

var skycons=新的skycons({
“颜色”：“黑色”
});
var canvas=document.querySelectorAll（'canvas'）；
[]forEach.call（画布、函数（el）{
添加（el，el.dataset.icon）；
});
天敌。play（）
您提供的svg代码误导了我：

我首先认为您的画布代码绘制的是一个Path2d，带有
moveTo
、
arcTo
或
quadraticCurveTo
方法，为了与svg的路径
d
属性交互，这些方法非常容易调整，因为画布的路径命令几乎与svg的路径命令相同

但是，我猜您是通过像InkScape或Illustrator这样的软件将位图转换成矢量来获得当前的svg代码的

实际上，Skycons代码所做的是，它在执行合成操作时绘制5个圆，因此只有不重叠的笔划可见

在这里，我修改了代码，使其变得显而易见：


（功能（全局）{
“严格使用”；
var requestInterval=函数（fn，延迟）{
变量句柄={value:null}；
函数循环（）{
handle.value=requestAnimationFrame（循环）；
fn（）；
}
loop（）；
返回手柄；
},
cancelInterval=函数（句柄）{
cancelAnimationFrame（handle.value）；
};
var关键帧=500，
冲程=0.08，
TAU=2.0*Math.PI，
二乘二=2.0/Math.SQRT（2）；
功能圆（ctx、x、y、r）{
ctx.beginPath（）；
弧（x，y，r，0，TAU，false）；
ctx.stroke（）；
}
功能烟团（ctx、t、cx、cy、rx、ry、rmin、rmax）{
var c=数学cos（t*TAU），
s=数学sin（t*TAU）；
rmax-=rmin；
圈(
ctx，
cx-s*rx，
cy+c*ry+rmax*0.5，
rmin+（1-c*0.5）*rmax
);
}
功能烟团（ctx、t、cx、cy、rx、ry、rmin、rmax）{
var i；
对于（i=5；i--；）
喷气（ctx、t+i/5、cx、cy、rx、ry、rmin、rmax）；
}
功能云（ctx、t、cx、cy、cw、s、彩色）{
t/=30000；
var a=cw*0.21，
b=cw*0.12，
c=cw*0.24，
d=cw*0.28；
烟团（ctx、t、cx、cy、a、b、c、d）；
烟团（ctx、t、cx、cy、a、b、c-s、d-s）；
}
var Skycons=功能（选项）{
this.list=[]；
this.interval=null；
this.color=opts&&opts.color？opts.color：“黑色”；
this.resizeClear=！！（opts&&opts.resizeClear）；
};
Skycons.CLOUDY=功能（ctx、t、颜色）{
var w=ctx.canvas.width，
h=ctx.canvas.height，
s=数学最小值（w，h）；
云（ctx、t、w*0.5、h*0.5、s、s*笔划、颜色）；
};
Skycons.prototype={
_determineDrawingFunction:函数（绘图）{
如果（绘图类型==“字符串”）
draw=Skycons[draw.toUpperCase（）.replace（/-/g，“”）]| | null；
回采；
},
添加：功能（el，绘图）{
var-obj；
如果（类型el==“字符串”）
el=document.getElementById（el）；
//如果画布名称不存在，则不执行任何操作
如果（el==null）
返回；
draw=此参数。\ u确定牵引功能（draw）；
//如果draw函数实际上不是函数，则不执行任何操作
if（绘图类型！=“函数”）
返回；
obj={
元素：el，
上下文：el.getContext（“2d”），
绘图：绘图
};
这个.list.push（obj）；
绘制（对象，关键帧）；
},
设置：功能（el、draw）{
var i；
如果（类型el==“字符串”）
el=document.getElementById（el）；
for（i=this.list.length；i--；）
if（this.list[i].element==el）{
this.list[i].drawing=this.\u确定drawing函数（drawing）；
this.draw（this.list[i]，关键帧）；
返回；
}
添加（el，draw）；
},
移除：功能（el）{
var i；
如果（类型el==“字符串”）
el=document.getElementById（el）；
for（i=this.list.length；i--；）
if（this.list[i].element==el）{
本列表拼接（i，1）；
返回；
}
},
绘图：功能（对象、时间）{
var canvas=obj.context.canvas；
如果（此.resizeClear）
canvas.width=canvas.width；
其他的
objectj.context.clearRect（0，0，canvas.width，canvas.height）；
对象绘图（对象上下文、时间、此颜色）；
},
播放：函数（）{
var self=这个；
这个。暂停（）；
this.interval=requestInterval（函数（）{
var now=Date.now（），
我
for（i=self.list.length；i--；）
self.draw（self.list[i]，现在）；
}, 1000 / 60);
},
暂停：函数（）{
var i；
如果（此时间间隔）{
取消间隔（此.interval）；
this.interval=null；
}
}
};
global.Skycons=Skycons；
}(本);；
var skycons=新的skycons({
“颜色”：“黑色”
});
var canvas=document.querySelectorAll（'canvas'）；
[]forEach.call（画布、函数（el）{
添加（el，el.dataset.icon）；
});
天敌。play（）
我认为
对此没有帮助，这里的动画是你的观点。您可以尝试使用
并将
从
设置为起始
d
pat