浅谈前端技术中的贝赛尔曲线

　　我胡汉三又回来了！闲话不多说，我们直奔主题。关于贝赛尔曲线的概述这就不说了，这里来介绍一下前端中的三种应用，分别是用在了CSS3(transition)、Canvas、SVG。以下贝塞尔曲线均指三次贝塞尔。

　　一、CSS3

　　　　这里贝塞尔其实是以transition动画的进行速度方式的角色出现的。大家都知道transition动画的timing-function默认为ease(慢-快-慢)，用的比较多的也就是linear(匀速变化)。有了贝塞尔曲线，我们可以定制自己想要的transition的timing-function，因此CSS3为我们提供了一个新的东东——cubic-bezier(x1,y1,x2,y2)，这里的(x1,y1)、(x2,y2)就是三次贝塞尔曲线的两个中间点。具体的用法我们可以就拿ease和linear举例：transition:all 3s ease用贝塞尔来表示就是transition:all 3s cubic-bezier(.25,.1,.25,1);transition:all 3s linear的话就更简单了，即transition:all 3s cubic-bezier(0,0,1,1)。transition的速度变化说白了就是贝塞尔曲线的斜率变化，这里有一个很好的网址，如果想知道具体变化规律的数值的话——http://cubic-bezier.com。

　　二、Canvas

　　　　canvas是啥我就不多说了。canvas为贝塞尔曲线专门建了个方法——bezierCurveTo()。如果要画一个三次贝塞尔曲线，这个方法也就是ctx.bezierCurveTo(x1,y1,x2,y2,x3,y3)。因为canvas的特性，贝塞尔曲线也是一个路径，必定要先把画笔移到某个点，才可以开始画路径。所以三次贝塞尔曲线的起始点并不包括在这个方法中，而应该是由这个方法前的ctx.moveTo(x,y)来规定。那么这个方法里的三个点就很好了解了，就是两个中间点加结束点。

　　三、SVG

　　　　SVG的画法其实说白了和canvas大同小异(个人感觉canvas和SVG的用法思想本来就差不太多，就是画出来东西差异很大而已)。这里需要用到SVG的一个path标签(路径标签)。在path这个标签中加入属性即可，而path标签中一共有10个标准指令加上一个非标准指令(感兴趣可以百度一下),画三次贝塞尔曲线的话就需要用到M和C指令。具体例子：<path d="M10 10 C 20 20, 40 20, 50 10">这里的"M"表示moveto，"C"表示curveto，是不是似曾相识。说了嘛canvas和svg其实用法上大同小异。也就一目了然了，还是靠着4个点在"搞事情"。