C/c 三次贝塞尔曲线

详细介绍SVG路径的C三次贝塞尔曲线命令，包括控制点设置、曲线形状控制。通过实例掌握如何绑制平滑曲线。 三次贝塞尔曲线是最常用的曲线命令，通过两个控制点可以绑制各种平滑曲线。

命令格式

• C x1,y1 x2,y2 x,y：三次贝塞尔曲线（绝对坐标）
• c dx1,dy1 dx2,dy2 dx,dy：三次贝塞尔曲线（相对坐标）

参数说明

• x1,y1：第一个控制点
• x2,y2：第二个控制点
• x,y：终点

贝塞尔曲线原理

三次贝塞尔曲线由起点、两个控制点和终点定义：

<path d="M 50,150 C 100,50 200,50 250,150" fill="none" stroke="#3498db" stroke-width="2"/>

基本用法

简单曲线

<path d="M 20,100 C 100,20 180,20 260,100" fill="none" stroke="#3498db" stroke-width="2"/>
<path d="M 20,100 C 100,180 180,180 260,100" fill="none" stroke="#e74c3c" stroke-width="2"/>

S 形曲线

<path d="M 20,100 C 100,20 180,180 260,100" fill="none" stroke="#2ecc71" stroke-width="2"/>

连续曲线

多个 C 命令可以连接成连续曲线：

<path d="M 20,100 C 60,20 100,20 140,100 C 180,180 220,180 260,100 C 300,20 340,20 380,100" 
      fill="none" stroke="#9b59b6" stroke-width="2"/>

实际应用

波浪线

<path d="M 0,50 C 50,10 100,90 150,50 C 200,10 250,90 300,50 C 350,10 400,90 400,50" 
      fill="none" stroke="#3498db" stroke-width="2"/>

心形

<path d="M 100,150 C 50,100 20,60 50,40 C 80,20 100,50 100,70 C 100,50 120,20 150,40 C 180,60 150,100 100,150" 
      fill="#e74c3c" stroke="#c0392b" stroke-width="2"/>

对话气泡

<path d="M 20,20 C 20,10 30,10 40,10 L 200,10 C 210,10 220,10 220,20 L 220,70 C 220,80 210,80 200,80 L 80,80 L 60,100 L 70,80 L 40,80 C 30,80 20,80 20,70 Z" 
      fill="#3498db" fill-opacity="0.3" stroke="#3498db" stroke-width="2"/>

小结

三次贝塞尔曲线通过两个控制点定义曲线形状，是最常用的曲线命令。控制点决定了曲线的弯曲程度和方向。多个 C 命令可以连接成复杂的连续曲线。