Javascript 如何使此贝塞尔曲线与图像中的曲线相似
我一直在尝试一次又一次地制作一条贝塞尔曲线，它类似于太阳最终在其上运动。 我被引导使用SVG来产生效果，然后在用javascript或本例中的SVG绘制形状后，添加CSS来填充形状的空洞 有人可以帮助我最终如何在代码中创建形状，就像我尝试使用SVG一样，但不管怎样，形状都不会产生平滑度，并且在贝塞尔曲线上留下一些凸起 这是SVG。它正在开发中，但其想法是贝塞尔曲线与图像上的曲线具有相同的平滑度，之后可以应用于CSS效果，在需要时可以在任意时刻停止和启动。这样的行为在CSS中是否可行？这意味着用图像中描述SVG形状的方式填充SVG形状Javascript 如何使此贝塞尔曲线与图像中的曲线相似,javascript,html,css,svg,bezier,Javascript,Html,Css,Svg,Bezier,我一直在尝试一次又一次地制作一条贝塞尔曲线，它类似于太阳最终在其上运动。 我被引导使用SVG来产生效果，然后在用javascript或本例中的SVG绘制形状后，添加CSS来填充形状的空洞 有人可以帮助我最终如何在代码中创建形状，就像我尝试使用SVG一样，但不管怎样，形状都不会产生平滑度，并且在贝塞尔曲线上留下一些凸起 这是SVG。它正在开发中，但其想法是贝塞尔曲线与图像上的曲线具有相同的平滑度，之后可以应用于CSS效果，在需要时可以在任意时刻停止和启动。这样的行为在CSS中是否可行？这意味着用图
//平滑比率
常数平滑=0.2
常数点=[
[15, 35],
[40, 30],
[65, 10],
[95, 5],
[115, 20],
[125, 25],
]
//这里最终应该有更多的属性。
常量行=（点A、点B）=>{
常量长度x=点B[0]-点A[0]
常量=点B[1]-点A[1]
返回{
长度：Math.sqrt（Math.pow（lengthX，2）+Math.pow（length，2）），
角度：数学atan2（长，长）
}
}
常量控制点=（当前、上一个、下一个、反向）=>{
常数p=以前的| |当前
常数n=下一个| |当前
常数o=直线（p，n）
常数角度=o.angle+（反向？数学PI:0）
常数长度=o.length*平滑
常数x=当前[0]+数学cos（角度）*长度
常数y=当前[1]+数学正弦（角度）*长度
返回[x，y]
}
常量bezierCommand=（点，i，a）=>{
常数cps=控制点（a[i-1]，a[i-2]，点）
常数cpe=控制点（点，a[i-1]，a[i+1]，真）
返回`C${cps[0]}，${cps[1]}${cpe[0]}，${cpe[1]}${point[0]}，${point[1]}`
}
常量svgPath=（点，命令）=>{
常数d=点。减少（（acc，点，i，a）=>i==0
？`M${point[0]}，${point[1]}`
：`${acc}${命令（点，i，a）}`
, '')
返回``
}
const svg=document.querySelector（“.svg”）
svg.innerHTML=svgPath（点，bezierCommand）