SVG_39_path标签之字母C_三次贝塞尔曲线又名立方贝塞尔曲线
程序员文章站
2022-03-25 22:25:44
...
对于想要了解path标签其他字母属性和相关path使用的朋友，可以参看以下文章
贝塞尔曲线百科
贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。
简单一句话总结：贝塞尔曲线是可以通过控制点灵活控制的曲线。
今日知识点：
二次贝塞尔曲线其实是三次贝塞尔曲线的特殊形式，两个控制点坐标是同一个，三次贝塞尔曲线是有两个控制点的。
C c1x,c1y c2x,c2y x,y
字母C之后：
c1x,c1y这一对儿坐标表示第一个控制点；
c2x,c2y这一对儿坐标表示第二个控制点；
x,y这一对儿坐标表示终点坐标；
<!-- 绘制各种曲线是，M起点坐标一定是要的C标签:C c1x,c1y c2x,c2y x,y三次贝塞尔曲线，字母C之后：c1x,c1y这一对儿坐标表示第一个控制点；c2x,c2y这一对儿坐标表示第二个控制点；x,y这一对儿坐标表示终点坐标；--><path d="M20,20C30,200 400,200 200,10" fill="none" stroke="red" />
左侧切线交点坐标为控制点1，
右侧切线交点坐标为控制点2。
（示意图，凑活看）
下方是随意做了一个图形效果
Xi说孔方兄认证