html5贝塞尔曲线,用canvas绘制一个曲线动画——深入理解贝塞尔曲线

前言

在前端开发中，贝赛尔曲线无处不在：

它可以用来绘制曲线，在svg和canvas中，原生提供的曲线绘制都是使用贝赛尔曲线

它也可以用来描述一个缓动算法，设置css的transition-timing-function属性，可以使用贝塞尔曲线来描述过渡的缓动计算

几乎所有前端2D或3D图形图表库(echarts，d3，three.js)都会使用到贝塞尔曲线

这篇文章我准备从实现一个非常简单的曲线动画效果入手，帮助大家彻底地弄懂什么是贝塞尔曲线，以及它有哪些特性，文章中有一点点数学公式，但是都非常简单:)。

实现这样一个曲线动画

可以点击这里查看在线演示

在写代码之前，先了解一下什么是贝塞尔曲线吧。

贝塞尔曲线

贝塞尔曲线(Bezier curve)是计算机图形学中相当重要的参数曲线，它通过一个方程来描述一条曲线，根据方程的最高阶数，又分为线性贝赛尔曲线，二次贝塞尔曲线、三次贝塞尔曲线和更高阶的贝塞尔曲线。

下面详细介绍一下用得比较多的二次贝塞尔曲线和三次贝塞尔曲线

二次贝塞尔曲线

二次贝塞尔曲线由三个点P0,P1,P2来确定，这些点也被称作控制点。曲线的方程为：

这个方程其实有它的几何意义，它表示可以通过这样的步骤来绘制一条曲线：

选定一个0-1的t值

通过P0和P1计算出点Q0，Q0在P0 P1连成的直线上，并且length( P0, Q0 ) = length( P0, P1 ) * t

同样，通过P1和P2计算出Q1，使得length( P1, Q1 ) = length( P1, P2 ) * t

再重复一次这个步骤，通过Q1和Q2计算出B，使得length( Q0, Q1 ) = length( Q0, B ) * t。B就为当前曲线上的点

注：上面的length表示两点之间的长度

有了曲线方程，我们直接代入具体的t值就能算出点B了。

如果将t的值从0过渡到1，不断计算点B，就可以得到一条二次贝塞尔曲线：

图：二次贝塞尔线绘制过程

在canvas中，绘制二次贝塞尔曲线的方法为

ctx.quadraticCurveTo( p1x, p1y, p2x, p2y )

其中p1x, p1y, p2x, p2y为后两个控制点(P1和P2)的横纵坐标，它默认将当前路径的起点作为一个控制点(P0)。

三次贝塞尔曲线

三次贝塞尔曲线需要四个点P0,P1,P2,P3来确定，曲线方程为

它的计算过程和二次贝塞尔曲线类似，这里不再赘述，可以看下图：

图：三次贝塞尔曲线结构

同样，将t的值从0过渡到1，就可以绘制出一条三次贝塞尔曲线：