> 博客详情
参数方程表现形式
在中学的时候，我们都学习过直线的参数方程：y = kx +其中k表示斜率，b表示截距（即与y轴的交点坐标）。类似地，我们也可以用一个参数方程来表示一条曲线。1962年，法国工程师贝塞尔发明了贝塞尔曲线方程。关于贝塞尔曲线的详细介绍可以参考（维基）。这里只介绍OpenGL实现贝塞尔的函数。
OpenGl定义一条曲线时，也把它定义为一个曲线方程。我们把这条曲线的参数成为u,它的就是曲线的。曲面则需要u和v两个参数来描述。注意，u和v参数只表示了描述曲线的参数方程的范围，它们并没有反映实际的坐标值。其坐标可以表示为:
x = f(u); y = g(u); z = h(u);
贝塞尔曲线的形状由控制点来控制。贝塞尔曲线的控制点个数为曲线的阶。根据控制点的个数，贝塞尔曲线又分为二次贝塞尔曲线，三次贝塞尔曲线，高阶贝塞尔曲线。
线性贝塞尔曲线演示动画，t in [0,1]
二次方曲线
为建构二次贝塞尔曲线，可以中介点Q0和Q1作为由0至1的t：
由P0至P1的连续点Q0，描述一条线性贝塞尔曲线。
由P1至P2的连续点Q1，描述一条线性贝塞尔曲线。
由Q0至Q1的连续点B（t），描述一条二次贝塞尔曲线。
二次贝塞尔曲线的结构 二次贝塞尔曲线演示动画，t in [0,1]
三次方曲线
为建构高阶曲线，便需要相应更多的中介点。对于三次曲线，可由线性贝塞尔曲线描述的中介点Q0、Q1、Q2，和由二次曲线描述的点R0、R1所建构：
三次贝塞尔曲线的结构 三次贝塞尔曲线演示动画，t in [0,1]
两段曲线是否相连接，代表这两段曲线是否连续的。曲线的连续性分为4种，无连续，点连续，正切连续，曲率连续。下图分别表示了这几种情况：
其中曲率连续的曲线过渡的更平滑。我们可以通过参数来设置曲线的连续性。
OpenGL提供了一些函数来绘制贝塞尔曲线和曲面。我们只需要提供控制点和u,v作为参数，然后调用求值函数来绘制曲线。
2D曲线的例子：
//控制点&GLint&numOfPoints&=&4;&static&GLfloat&controlPoints[4][3]&=&{{-4.0f,&0.0f,&0.0f},
{-6.0f,&4.0f,&0.0f},
{6.0f,&-4.0f,&0.0f},
{4.0f,&0.0f,&0.0f}};&void&SetupRC()
&&glClearColor(0.0f,&0.0f,&0.0f,&1.0f);
&&glColor3f(1.0f,&0.0f,&1.0f);
//画控制点
void&DrawPoints()
&&glPointSize(2.5f);
&&glBegin(GL_POINTS);&for&(int&i&=&0;&i&&&numOfP&++i)
&&&&&&glVertex3fv(controlPoints[i]);
&&glEnd();
void&ChangeSize(GLsizei&w,&GLsizei&h)
&&if&(h&==&0)
&&&&h&=&1;
&&glViewport(0,&0,&w,&h);
&&&//使用正交投影
&&glMatrixMode(GL_PROJECTION);
&&glLoadIdentity();
&&gluOrtho2D(-10.0f,&10.0f,&-10.0f,&10.0f);
&&glMatrixMode(GL_MODELVIEW);
&&glLoadIdentity();
void&RenderScene()
&&glClear(GL_COLOR_BUFFER_BIT);
&&&//设置贝塞尔曲线，这个函数其实只需要调用一次，可以放在SetupRC中设置
&&&&glMap1f(GL_MAP1_VERTEX_3,&//生成的数据类型
&&&&&0.0f,&//u值的下界
&&&&&&100.0f,&//u值的上界
&&&&&&&3,&//顶点在数据中的间隔，x,y,z所以间隔是3
&&&&&&&&numOfPoints,&//u方向上的阶，即控制点的个数
&&&&&&&&&&controlPoints[0][0]&//指向控制点数据的指针&);
&&&//必须在绘制顶点之前开启
&&&glEnable(GL_MAP1_VERTEX_3);
&&&&//使用画线的方式来连接点
&&&glBegin(GL_LINE_STRIP);
&&for&(int&i&=&0;&i&&=&100;&i++)
&&&&glEvalCoord1f((GLfloat)i);
&&glEnd();
&&DrawPoints();
&&glutSwapBuffers();
在RenderScene函数中调用glMap1f来为曲线创建映射。第一个参数为GL_MAP1_VERTEX3，设置求值器产生顶点为三元组(x,y,z).还可以设置为产生纹理坐标和颜色信息。参考.后面的两个参数设定了u的取值范围[0,100]，第四个参数指定了顶点在数组中的间隔，由于顶点是由3个浮点数组成，所以间隔是3.第五个参数指定了控制点的个数，最后一个参数是控制点数组。然后我们需要启用求值器，调用如下：
glEnable(GL_MAP1_VERTEX3);
glEvalCoord1f函数，接受一个参数为曲线的参数值。调用这个函数会通过求值函数求出顶点坐标值，然后内部调用了glVertex。这里使用连线的方式来连接这些顶点：
glBegin(GL_LINE_STRIP);
for(i = 0; I &= 100; i++)
& glEvalCoord1f((GLfloat)i);
OpenGl还提供了更简单的方式来完成上面的任务。我们可以通过glMapGrid函数来设置一个网格，来告诉OpenGL在u的值域的范围内创建一个包含各个点的空间对称的网格。然后，我们调用glEvalMesh，使用指定的图元(GL_LINE或GL_POINTS)来链接各个点。
我们用下面的两个函数调用
&&glMapGrid1f(100,&0.0f,&100.0f);
&&glEvalMesh1(GL_LINE,&0,&100);
可以替换下面的代码
glBegin(GL_LINE_STRIP);&
for&(int&i&=&0;&i&&=&100;&i++)
&&&&glEvalCoord1f((GLfloat)i);
使用这种方式更为紧凑。
创建一个贝塞尔曲面与创建一个贝塞尔曲线类似。除了给出u的定义域之外，还要给出v的定义域。下面的例子是创建一个贝塞尔曲面。与之前不同的是，我们沿着v的定义域定义了3组控制点。为了保持曲面的简单，这几组控制点只是z值不同。用这种方式画的曲面，看起来像是曲线沿z轴的扩展。
//控制点&&GLint&nNumPoints&=&3;
GLfloat&ctrlPoints[3][3][3]=&{{{&&-4.0f,&0.0f,&4.0f},&&&&
{&-2.0f,&4.0f,&4.0f},&&&&
{&&4.0f,&0.0f,&4.0f&}},
{{&&-4.0f,&0.0f,&0.0f},&&&&
{&-2.0f,&4.0f,&0.0f},&&&&
{&&4.0f,&0.0f,&0.0f&}},
{{&&-4.0f,&0.0f,&-4.0f},&&&&
{&-2.0f,&4.0f,&-4.0f},&&&&
{&&4.0f,&0.0f,&-4.0f&}}};&//画控制点&&void&DrawPoints(void)
{&int&i,j;&&&&
&&glColor3f(1.0f,&0.0f,&0.0f);&//把点放大一点，看得更清楚&&glPointSize(5.0f);
&&glBegin(GL_POINTS);&
&&for(i&=&0;&i&&&nNumP&i++)
&&&for(j&=&0;&j&&&3;&j++)
&&&&&&glVertex3fv(ctrlPoints[i][j]);
&&glEnd();
void&RenderScene(void)
//&Clear&the&window&with&current&clearing&color&
&&glClear(GL_COLOR_BUFFER_BIT&|&GL_DEPTH_BUFFER_BIT);
&&&//&保存模型视图矩阵&&
&&&glMatrixMode(GL_MODELVIEW);
&&glPushMatrix();&
&&//旋转一定的角度方便观察&&
&&glRotatef(45.0f,&0.0f,&1.0f,&0.0f);
&&glRotatef(60.0f,&1.0f,&0.0f,&0.0f);
&&glColor3f(0.0f,&0.0f,&1.0f);&//设置映射方式，只需要设置一次可以在SetupRC中调用。&&
&&glMap2f(GL_MAP2_VERTEX_3,&//生成的数据类型&&
&&0.0f,&//&u的下界&
&&10.0f,&//u的上界&&
&&3,&//数据中点的间隔&&
&&3,&//u方向上的阶&&
&&0.0f,&//v的下界&&
&&10.0f,&//v的上界&&
&&9,&//&控制点之间的间隔&&
&&3,&//&v方向上的阶&&
&&&ctrlPoints[0][0][0]);&//控制点数组&
&&//启用求值器&&
&&glEnable(GL_MAP2_VERTEX_3);&
&&//从0到10映射一个包含10个点的网格&&
&&glMapGrid2f(10,0.0f,10.0f,10,0.0f,10.0f);&
&&//&计算网格&&
&&glEvalMesh2(GL_LINE,0,10,0,10);&
&&//画控制点&&
&&DrawPoints();
&&glPopMatrix();
&&glutSwapBuffers();
在这里我们用glMap2f替换了之前的glMap1f, 这个函数指定了u和v两个域上的点。除了指定u的上界和下界之外，还要指定v的上界和下界。v定义域内点的距离是9，因为这里使用了3维数组，包含了3个u值，每个u值又包含了3个点，3x3=9。然后指定v方向上的阶，即每个u分支上v方向有多少个点。最后一个参数是指向控制点的指针。
然后我们设置求值器.
//启用求值器
glEnable(GL_MAP2_VERTEX_3); //从0到10映射一个包含10个点的网格
glMapGrid2f(10,0.0f,10.0f,10,0.0f,10.0f);
计算网格网格表面，用线的方式表示。
// 计算网格 & glEvalMesh2(GL_LINE,0,10,0,10);
光照和法线
求值器还可以帮我们生成表面的法线，只需简单的修改一些代码：
把glEvalMesh2(GL_LINE, 0, 10, 0, 10);替换为glEvalMesh2(GL_FILL, 0, 10, 0, 10);然后在初始化时 SetupRC中调用glEnable(GL_AUTO_NORMAL);就可以得到一个收到光照的曲面了。
人打赏支持
参与源创会
领取时间：
“”在线下联结了各位 OSCer，推广开源项目和理念，很荣幸有你的参与~
领取条件：参与过开源中国“源创会”的 OSCer 可以领取
码字总数 97096
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥钢笔工具进阶技巧:教你如何画出完美的贝塞尔曲线
作者：佚名
字体：[ ] 来源：互联网 时间：12-09 14:52:12
今天小编为大家分享钢笔工具进阶技巧，教程真的很实用，对于初学者来说很值得大家学习，主要是教大家如何画出完美的贝塞尔曲线，好了，下面我们一起来学习吧
今天小编为大家分享钢笔工具进阶技巧教程，教程真的很不错，值得大家学习，推荐到脚本之家，喜欢的朋友可以参考本文：
Pen Tool Animation by&Gal Shir
在我初学 UI 的时候，临摹了很多作品，每次临摹基本都可以分为两个步骤，第一步是用钢笔工具和形状工具把物体勾勒出来，第二步是往形状上填充颜色，然后加一些渐变或者投影。在填充颜色和细节的时候是很享受的，但是在勾轮廓的时候总是很崩溃，画出来的曲线总是不流畅，也不知道问题出在哪里，其实就是钢笔工具没有掌握好。
后来看到一篇外文文章，写的是在 Illustrator 中使用钢笔工具的技巧，才明白了怎样才能用钢笔工具画好曲线，今天结合那篇文章加上我的感悟来聊一聊 UI 设计中的难点，钢笔工具。
准备工作，勾选橡皮带工具
I Design With Code by&Chris Gannon
钢笔工具大家应该都很熟悉了，中间一个节点，两边两个手柄，调节手柄的方向可以控制曲线的走向，调节手柄的长度可以控制曲线的弧度。上面的动效设计表达的就是这个意思。
在使用钢笔工具的时候有个能帮助我们的选项，叫橡皮带，勾选上以后，曲线会随着鼠标移动，方便我们预览曲线的走向，看下图，在图片最右边，点击齿轮勾选上：
节点手柄方向和位置是画好曲线的关键
接下来就要开始用钢笔工具画曲线了，在画以前我们可以看看高级 UI 设计师们是怎么处理曲线的节点的，看下面两张图：
从图片里我们能发现，这些节点的方向都是有规律的，都遵循了一种秩序，第一个规律是：除了曲线结束的角，所有节点的手柄不是水平的就是垂直的，具体情况要根据曲线的走向，如果曲线横着走，手柄方向就水平，如果竖着走，方向就垂直。第二个规律看下面的两张图：
图片中红色的圈代表水平的节点，蓝色的圈代表垂直的节点，从图片里可以看出，不仅仅是手柄的方向有规律，节点的位置也是有规律的，第二个规律就是：所有的节点都在曲线的 &最& 外侧或者 &最& 内侧。简单得说就是如果曲线是凸出来的，节点就放在最凸的那个地方，如果节点是凹进去的，节点就要放在最凹的那个地方。掌握了这两个规律就可以轻松画出完美的曲线了。
实战演示一下
比如说用钢笔工具画上图这个 & S &
根据第二个规律，所有节点都在曲线最凸或最凹的地方，在这些位置依次画上节点。
根据第一个规律，手柄的方向不是垂直就是水平的，鼠标长按钢笔工具，在菜单的最后找到转换点工具，就是图片里 &T& 上面的那个，按住 shift 点击节点拖动，在每个节点上把手柄拖出来，这时候拖出来的两个手柄是一样长的，位置大概正确就行，不用刻意调整。
在把所有手柄拖出来以后，我们开始调细节，还是用转换点工具，按住 shift ，分开拖动每个手柄使曲线吻合。
所有手柄都调整完成后就大功告成啦！
今天的教程主要讲了钢笔工具的使用技巧，只要熟练掌握了就可以画出世界上任何的造型，再加上颜色和质感，我们就能创造出精彩的设计。一定要多多练习，钢笔工具可以说是基础，但也是 UI 设计中的一个难点，大家加油！下期想说说线框小图标的设计心得。
大家感兴趣的内容
12345678910
最近更新的内容在coreldraw中使用贝塞尔工具绘制平滑曲线
&&&&&&&&&&&&&&&&&
[begin]-----------------B&zier曲线-----------------
1962年，法国数学家Pierre B&zier第一个研究了这种绘制曲线的方法，并给出了详细的计算公式，由此为计算机矢量图形学奠定了基础。它的主要意义在于无论是直线或曲线都能在上予以描述。
B&zier曲线是依据四个（位置任意的）点绘制出的一条光滑曲线。在历史上，研究贝塞尔曲线的人最初是按照已知曲线来确定四个点的思路设计出这种矢量曲线绘制法。贝塞尔曲线的有趣之处更在于它的“皮筋效应”~也就是说，随着点有规律地移动，曲线将产生皮筋伸引一样的变换，带来视觉上的冲击。
贝塞尔曲线是计算机图形图像造型的基本工具，是图形造型运用得最多的基本线条之一。它通过控制曲线上的四个点（起始点、终止点以及两个相互分离的中间点）来创造、编辑图形。
其中起重要作用的是位于曲线中央的控制线。这条线是虚拟的，中间与贝塞尔曲线交叉，两端是控制端点。移动两端的端点时贝塞尔曲线改变曲线的曲率（弯曲的程度）；移动中间点（也就是移动虚拟的控制线）时，贝塞尔曲线在起始点和终止点锁定的情况下做均匀移动。注意，贝塞尔曲线上的所有控制点、节点均可编辑。这种“智能化”的矢量线条为艺术家提供了一种理想的图形编辑与创造的工具。
1）圆滑型：节点的两侧有两个控制手柄，节点的两侧线条以一定曲率平滑地通过此节点，亦称平滑点。
[本人注释：又分为对称型（两侧曲率相同同步变化）与不对称型（两侧曲率不同）]
2）直线型：节点的两侧没有控制手柄，以直线段通过此节点。
3）曲线型：亦称尖突点，即节点两侧有两个控制手柄，但这两个控制手柄相互独立，即当移动一个控制手柄，另外一个不会受到影响。
4）复合型：节点的两侧只有一个控制手柄，且是一条直线段与一条曲线相交后产生的节点
在coreldraw中使用贝塞尔工具:
单击为直线.
点击并拖动鼠标为曲线.拖动时有同操作可产生两种节点.....
1.拖动到满意弧度后按C键为尖角节点
2.拖动到满意弧度后松开鼠标可产生三种节点....
松开后不对该节点进行操作则该节点为平衡节点.
&& 2.b. 松开后单击该节点则该节点变为平滑节点.
松开后双击该节点则该节点就为尖角节点.再点击又可变回平滑节点...... 可以变成尖角
按C键可以改变下一线段的切线方向
按S键可以改变上下两线段的切线方向
按ALT键且不松开左键可以移动节点
按CTRL这，切点方向可以根据预设空间的限制角度值任意放置。
要连续画不封闭且不连接的曲线按ESC键 技巧：先调节点，再调控制点还可以一边画一边对之前的节点进行任意移动
百度百科中的补充：
1、在任意工具情况下，在曲线上都可以换为形状工具对曲线进行编辑；
2、在曲线上用形状工具双击可以增加一个节点；
3、在曲线的节点上双击形状工具可以删除一个节点；
4、位图可以用形状工具点击再拖动某一点可以进行任意形状的编辑；
5、用形状工具同时选中几个节点可以进行移动；
6、在微调距离中设定一个数值再用形状工具选中曲线的某一节点敲方向箭头可以进行精确位移；
7、将某一个汉字或字母转换为曲线就可以用形状工具进行修理如将“下”的右边的点拿掉等。
贝赛尔工具
画直线、曲线，描绘图形的路径
画直线、曲线，描绘图形的路径
画直线、曲线，描绘图形的路径
Shift键操作
曲率按45度的角度变换
曲率按45度的角度变换
进行多重选择
按住描出角点，画直线，选中“橡皮带”可画曲线
按住描出角点，可画直线和曲线
按住描出角点，只能画直线
工作时的状态
鼠标呈钢笔状态，锚点呈黑色矩形框
鼠标呈钢笔状态，锚点呈蓝色矩形框
鼠标呈十字状态，锚点呈黑色矩形框
选中时有，可以不选
路径闭合状态
可选择自动闭合路径
可选择自动闭合路径
选择添加锚点工具
或选项栏里选择“自动添加／删除”选中“钢笔”工具指向锚点单击鼠标增加
选中“画笔”工具双击鼠标增加
选择“挑选工具”双击鼠标增加
选择删除锚点工具
或在选项栏里选择“自动添加／删除”选中“钢笔”工具指向锚点单击鼠标删除
选中“画笔”工具指向锚点双击鼠标删除
选择“挑选工具”指向锚点双击鼠标删除
选择“转换点工具”
或者按住“Ctrl”+“移动工具”
选择“挑选工具”调节
选择“挑选工具”调节
按住“Ctrl”键在路径外点按或在“选项栏”里选择“”
按下“空格键”或按“Esc”
本文转自：
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。SVG矢量绘图 path路径详解（贝塞尔曲线及平滑） - Just Code - ITeye技术网站
博客分类：
维基百科：
以二次贝塞尔曲线的公式为例：
//p0、p1、p2三个点，其中p0为起点，p2为终点，p1为控制点
//它们的坐标用数组表示[x,y]
//t的范围是0-1
function qBerzier(p0,p1,p2,t){
var x = (1 - t) * (1 - t) * p0[0] + 2 * t * (1 - t) * p1[0] + t * t * p2[0];
var y = (1 - t) * (1 - t) * p0[1] + 2 * t * (1 - t) * p1[1] + t * t * p2[1];
return [x,y];
通过函数，可以用L方法绘制贝塞尔曲线，但是这种方法是用直线将离散的点连接起来，只是因为点的距离很近，所以看上去是曲线，不够完美。所以绘制贝塞尔曲线，一般还是用path里的曲线命令比较好。
path路径绘制中，绘制贝塞尔曲线的命令包括：
Q 二次贝赛尔曲线 x1,y1 x,y
T 平滑二次贝塞尔曲线 x,y
C 曲线（curveto） x1,y1 x2,y2 x,y
S 平滑曲线 x2,y2 x,y
其中Q和T可以在一起使用，C和S可以在一起用。
Q 二次贝塞尔曲线
用法：M x0,y0 Q x1,y1 x2,y2
通过M定义（x0,y0）为起点，用Q定义（x1,y1）为控制点，（x2,y2）为终点，构成一条二次贝塞尔曲线。 Q方法非常简单直观。
T 二次贝塞尔曲线平滑延伸
用法：M x0,y0 Q x1,y1 x2,y2 T x4,y4
T 命令是二次被赛尔曲线的平滑延伸命令，用Q定义了一段二次贝塞尔曲线后面，紧接着一个T命令，只需定义终点，就可以自动延伸出一条平滑的曲线。 在这段曲线中，(x3,y3)没有手工定义，这里使用的T方法，只定义一个终点，起点是上一段曲线的终点，控制点则是上一段曲线的控制点的对称点（相对于 上一段曲线的终点）。 在这里，(x3,y3)是(x1,y1)的对称点（相对于(x2,y2)对称）。
C 三次贝塞尔曲线
用法：M x0,y0 C x1,y1 x2,y2 x3,y3
C方法定义的是三次贝塞尔曲线，这里只是多了一个控制点，很好理解
S 三次贝塞尔曲线平滑延伸
用法：M x0,y0 C x1,y1 x2,y2 x3,y3 S x5,y5 x6,y6
三次贝塞尔也有一个平滑延伸的命令，需要定义一个控制点和一个终点，命令会再自动生成一个控制点，从而形成一条延伸出来的三次贝赛尔曲线。
浏览: 8350494 次
来自: 洛杉矶
代码里有错误xxNew -&xNew, yyNew -& ...
PHP 生成 PDFhttp://www.51ask.org/ ...
我想问下那个111.1是怎么得来的
楼上这里错了BITMAP_&TYPT&_B ...前端在线资源
本文地址：
一、甚忙，短言之
最近谷歌那谁谁因为自己的相好被老大抢了，就去小米了！狗血的三角关系要比烂掉的TVB神剧好看多了。
但这只是小菜，贝塞尔曲线才是很角色，因为有外国血统，因此，和CSS3动画、SVG以及canvas都有基情，基情绽放如盛夏的菊花。
然而，有基情好啊，搞在一起就可以一锅端了，不是有这么一首歌嘛~
互撸娃，互撸娃，一根藤上七朵花；
连根一拔，全死啦！啦~啦啦啦……
so, 如此一锅端的好戏怎能错过呢！
二、认识主角——贝塞尔
考考你，下面哪个贝塞尔是“贝塞尔曲线”的那个贝塞尔？只有一次机会哦！（点击选择）
答错啦！！
回答正确！！
还用这种浏览器？我只能直接告诉你答案了，第二位兄弟是正统。
贝塞尔，Pierre Bézier，法国数学家~
三、贝塞尔曲线作用
贝塞尔曲线作用：曲线、画曲线、画美女曲线、规律可循地画美女曲线。由于有此特性，所以被SVG, Canvas, CSS3等宠幸，搞基从此开始。
四、如何用贝塞尔曲线画曲线
如果给你一个点，你能做什么？
答：我能撬动地球………………………………………………模型。
如果给你两个点，你能做什么？
答：我能画出地球………………………………………………曲线
是条件不足的。
一个标准的3次贝塞尔曲线需要4个点：起始点、终止点（也称锚点）以及两个相互分离的中间点。
无论SVG, Canvas还是CSS3动画与贝塞尔搞基，都牵扯到这4个点。我们来瞅瞅~~
五、SVG和贝塞尔曲线的基情史
SVG之前有多次介绍，可缩放矢量图形(Scalable Vector Graphics)、二维、XML标记，类似下面：
&svg width="160px" height="160px">
&path d="M10 80 ..." />
本质就是HTML类似东西。
对于设计狮，也是可以把玩SVG的，可以，或者在Illustrator中绘制并导出。
SVG的代码不具体展开（说开了可以连载好几篇），提一下其中一个path的标签，可以绘制任意的路径，自然也包括和贝塞尔搞基。
三次贝塞尔曲线指令：C
x1 y1, x2 y2, x y两个控制点(x1,y1)和(x2,y2)，(x,y)代表曲线的终点。字母C表示特定动作与行为，这里需要大写，表示标准三次方贝塞尔曲线。
看看下面一些描述贝塞尔曲线的代码（片段），大家可以好好地感受下（其中字母M表示特定动作moveTo, 指将绘图的起点移动到此处）。
&svg width="190px" height="160px">
&path d="M10 10 C 20 20, 40 20, 50 10" stroke="3" fill="none"/>
&path d="M70 10 C 70 20, 120 20, 120 10" stroke="3" fill="none"/>
&path d="M130 10 C 120 20, 180 20, 170 10" stroke="3" fill="none"/>
&path d="M10 60 C 20 80, 40 80, 50 60" stroke="3" fill="none"/>
&path d="M70 60 C 70 80, 110 80, 110 60" stroke="3" fill="none"/>
&path d="M130 60 C 120 80, 180 80, 170 60" stroke="3" fill="none"/>
&path d="M10 110 C 20 140, 40 140, 50 110" stroke="3" fill="none"/>
&path d="M70 110 C 70 140, 110 140, 110 110" stroke="3" fill="none"/>
&path d="M130 110 C 120 140, 180 140, 170 110" stroke="3" fill="none"/>
曲线效果类似下面这张图：
可以看到M后面的起点，加C后面3个点，构成了贝赛尔曲线的4个点。
六、Canvas与贝塞尔曲线的基情史
Canvas之前也介绍过，HTML 画布元素，脚本化客户端绘图。
其中Canvas有个bezierCurveTo()方法，专门用来和贝塞尔基情缠绵。
代码走起：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
开始点：moveTo(20,20)
控制点 1：bezierCurveTo(20,100,200,100,200,20)
控制点 2：bezierCurveTo(20,100,200,100,200,20)
bezierCurveTo(20,100,200,100,200,20)
对比SVG代码，大家有木有发现，本质上都是一个德行——有个m, 还有3个点。所以，才能基情四射啊！
七、CSS3动画与贝塞尔曲线的基情史
贝塞尔曲线决定了CS3S动画那个那个的节奏~ 是先快后慢呢，还是先慢后快~~
为了更好地搞基，CSS3还专门留了个VIP属性，叫做cubic-bezier, 直译为“立方-贝塞尔”，实际上就是指的标准三次方贝塞尔曲线。
具体用法类似：
transition:cubic-bezier(.25,.1,.25,1)
其中.25,.1这个坐标对于起点连接的那个锚点；.25,1这个坐标对于终点头上那根天线顶端那个点。
//zxx：诸位，擦亮双眼，两坐标不是一样的哦~~
有专门的页面让大家感受CSS3动画如何与贝塞尔曲线搞基的，点击这里走起：
以上链接是个非常好的工具，大家想要什么效果，可以自己调整，然后copy cubic-bezier相关代码就可以了。
有人会疑问，CSS3动画那个cubic-bezier值好像只有两个点诶~~
那是因为CSS3动画贝塞尔曲线的起点和终点已经固定了，分别是(0,0)和(1,1).
八、搞基史大集合
CSS3似乎稍稍不同步，于是，我们稍作调整，来个完美同频率共振开天辟地无敌大搞基：
CSS3贝塞尔起点是0,0; 终点是1, 1;
cubic-bezier(x1,y1, x2,y2)
SVG要想与和上面一起搞基，只要：
&path d="M0 0 C x1 y1, x2, y2, 1 1"/>
canvas想要与大家一起搞基，只要：
ctx.moveTo(0,0);
ctx.bezierCurveTo(x1,y1,x2,y2,1,1);
其中，完全一致的，x1,y1就是(0,0)头上插的天线的端点坐标，x2,y2就是(1,1)头上插的天线的端点坐标。
于是，三者与贝塞尔曲线完美搞基了！撒花，放鞭炮~~
九、结语以及参考内容
与我们实际接触更多应该是CSS3的贝塞尔曲线，撸一遍就发现贝塞尔曲线其实就是那么个回事，多一点感性直观认识，处理问题就更加得心应手了，希望本文内容能够对您的学习有所帮助。
感谢阅读，欢迎指正文章不准确之处。
参考文章：
原创文章，转载请注明来自[]
本文地址：
（本篇完）
相关文章 (0.861) (0.774) (0.226) (0.209) (0.188) (0.188) (0.188) (0.188) (0.158) (0.158) (RANDOM - 0.070)
标签： , , , , ,
赞助商广告()：
如果你月薪不足20K，不妨
这里有最全的web前端开发视频
如果你有1~3年前端开发经验，不妨
听说、你想学JS？不妨
热门总排行}