【摘要】：绘制贝塞尔曲线主要使用bezierCurveTo（）方法。该方法可以说是lineTo的曲线版，将当前坐标点到指定坐标点中间的贝塞尔曲线追加到路径中。图8.7bezierCurve与quadraticCurve的区别它们都有一个起点一个终点，但二次方贝塞尔曲线只有一个控制点，而三次方贝塞尔曲线有两个控制点。
绘制贝塞尔曲线主要使用bezierCurveTo（）方法。该方法可以说是lineTo的曲线版，将当前坐标点到指定坐标点中间的贝塞尔曲线追加到路径中。该方法的定义如图8.6所示：
图8.6 使用路径绘制的火柴人
bezierCurveTo（cp1x，cp1y，cp2x，cp2y，x，y）；
该方法使用6个参数。绘制贝塞尔曲线的时候，需要两个控制点，cp1x为第一个控制点的横坐标，cp1y为第一个控制点的纵坐标；cp2x为第二个控制点的横坐标，cp2y为第二个控制点的纵坐标；x为贝塞尔曲线的终点横坐标，y为贝塞尔曲线的终点纵坐标。
例如，绘制二次样条曲线，使用的方法是quadraticCurveTo。该方法的定义如下：
quadraticCurveTo（cp1x，cp1y，x，y）；
两种方法的区别如图8.7所示。
图8.7 bezierCurve与quadraticCurve的区别(www.xing528.com)
它们都有一个起点一个终点（图中的蓝点），但二次方贝塞尔曲线只有一个控制点，而三次方贝塞尔曲线有两个控制点。参数x和y是终点坐标，cp1x和cp1y是第一个控制点的坐标，cp2x和cp2y是第二个控制点的坐标。
下面通过bezierCurveTo方法绘制一个实心的红心图形，完整代码如下：
其显示效果如图8.8所示。
图8.8 在canvas中绘制红心
接下来通过bezierCurveTo方法绘制一个作注释用的对话框图形，代码如下：
其显示效果如图8.9所示。
图8.9 在canvas中绘制对话框
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
