用canvas繪製一個曲線動畫實例

在前端開發中，貝賽爾曲線無所不在，本文主要和大家分享用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，就可以畫出一條三次貝塞爾曲線：

##圖：三次貝塞爾曲線繪製過程

在canvas中，繪製三次貝塞爾曲線的方法為

ctx.bezierCurveTo( p1x, p1y, p2x, p2y, p3x, p3y )

其中

p1x, p1y, p2x, p2y, p3x, p3y為後三個控制點（P1,P2和P3）的橫縱座標，它預設將目前路徑的起點作為一個控制點（P0）。

貝塞爾曲線的特徵

在三次貝塞爾曲線後面，還有更高階的貝塞爾曲線，同樣它們繪製的過程也更加複雜

四次贝塞尔曲线

图：四次贝塞尔曲线

五次贝塞尔曲线

图：五次贝塞尔曲线

我们可以归纳出贝塞尔曲线有几个重要的特征：

1. n阶贝塞尔曲线需要n+1个点来确定

2. 贝塞尔曲线是平滑的

3. 贝塞尔曲线的起点和终点与对应控制点的连线相切

绘制贝塞尔曲线

复习完基础概念，接下来就要讲如果绘制贝塞尔曲线啦

为简单起见，我们选择使用二次贝塞尔曲线。

我们先不考虑动画的事，我们先将问题简化成：给定一个起点和一个终点，需要实现一个函数，它能够绘制出一条曲线。

也就是说我们需要实现一个函数drawCurvePath，除渲染上下文ctx外（不清楚ctx是什么的同学可以先熟悉下canvas的基本概念），它接受三个参数，分别为二次贝塞尔曲线的三个控制点。我们将样式控制移到函数外，drawCurvePath只用来绘制路径。

/**
 * 绘制二次贝赛尔曲线路径
 * @param  {Object} ctx
 * @param  {Array<number>} p0
 * @param  {Array<number>} p1
 * @param  {Array<number>} p2
 */
function drawCurvePath( ctx, p0, p1, p2 ) {
    // ...
}</number></number></number>

前文提到过，在canvas中，绘制二次贝赛尔曲线的方法是quadraticCurveTo，所以只要短短两行就能完成这个方法。

/**
 * 绘制二次贝赛尔曲线路径
 * @param  {CanvasRenderingContext2D} ctx
 * @param  {Array<number>} p0
 * @param  {Array<number>} p1
 * @param  {Array<number>} p2
 */
function drawCurvePath( ctx, p0, p1, p2 ) {
    ctx.moveTo( p0[ 0 ], p0[ 1 ] );
    ctx.quadraticCurveTo( 
        p1[ 0 ], p1[ 1 ],
        p2[ 0 ], p2[ 1 ]
    );
}</number></number></number>

这样就完成了基本的绘制二次贝塞尔曲线的方法了。

但是函数这样设计有点小问题

如果我们是在做一个图形库，我们想给使用者提供一个绘制曲线的方法。

对于使用者来说，他只想在给定的起点和终点间间绘制一条曲线，他想要得到的曲线尽量美观，但是又不想关心具体的实现细节，如果还需要给第三个点，使用者会有一定的学习成本（至少需要弄明白什么是贝塞尔曲线）。

看到这里你可能会比较疑惑，即使是二次贝塞尔曲线也需要三个控制点，只有起点和终点怎么绘制曲线呢。

我们可以在起点和终点的垂直平分线上选一点作为第三个控制点，可以提供给使用者一个参数来控制曲线的弯曲程度，现在函数就变成了这样

/**
 * 绘制一条曲线路径
 * @param  {CanvasRenderingContext2D} ctx
 * @param  {Array<number>} start 起点
 * @param  {Array<number>} end 终点
 * @param  {number} curveness 曲度(0-1)
 */
function drawCurvePath( ctx, start, end, curveness ) {
    // ...
}</number></number>

我们用curveness来表示曲线的弯曲程度，也就是第三个控制点的偏离程度。这样很容易就能计算出中间点。
现在完整的函数变成了这样：

/**
 * 绘制一条曲线路径
 * @param  {Object} ctx canvas渲染上下文
 * @param  {Array<number>} start 起点
 * @param  {Array<number>} end 终点
 * @param  {number} curveness 曲度(0-1)
 */
function drawCurvePath( ctx, start, end, curveness ) {
    // 计算中间控制点
    var cp = [
         ( start[ 0 ] + end[ 0 ] ) / 2 - ( start[ 1 ] - end[ 1 ] ) * curveness,
         ( start[ 1 ] + end[ 1 ] ) / 2 - ( end[ 0 ] - start[ 0 ] ) * curveness
    ];
    ctx.moveTo( start[ 0 ], start[ 1 ] );
    ctx.quadraticCurveTo( 
        cp[ 0 ], cp[ 1 ],
        end[ 0 ], end[ 1 ]
    );
}</number></number>

对，就这么短短几行，接下来我们就可以通过它来绘制一条曲线了，代码如下

nbsp;html>

    
        <title>draw curve</title>
    
    
        <canvas></canvas>
        <script>
            var canvas = document.getElementById( &#39;canvas&#39; );
            var ctx = canvas.getContext( &#39;2d&#39; );
            
            ctx.lineWidth = 2;
            ctx.strokeStyle = &#39;#000&#39;;
            ctx.beginPath();
    
            drawCurvePath( 
                ctx,
                [ 100, 100 ],
                [ 200, 300 ],
                0.4
            );
            
            ctx.stroke();
            
            function drawCurvePath( ctx, start, end, curveness ) {
                // ...
            }
        </script>
    

绘制结果：

绘制一条曲线

绘制贝塞尔曲线动画

终于来到文章的本体啦，我们的目的不是绘制一条静态的曲线，我们想绘制一条有过渡效果的曲线。

简化一下问题，那就是我们希望绘制曲线的函数还接受另一个参数，表示绘制曲线的百分比。我们定时去调用这个函数，递增百分比这个参数，就能画出动画了。

我们新增一个参数percent来表示百分比，现在函数变成了这样：

/**
 * 绘制一条曲线路径
 * @param  {Object} ctx canvas渲染上下文
 * @param  {Array<number>} start 起点
 * @param  {Array<number>} end 终点
 * @param  {number} curveness 曲度(0-1)
 * @param  {number} percent 绘制百分比(0-100)
 */
function drawCurvePath( ctx, start, end, curveness, percent ) {
    // ...
}</number></number>

但是canvas提供的quadraticCurveTo方法只能绘制一条完整的二次贝赛尔曲线，没有办法去控制它只画一部分。

画完后用clearRect擦除掉一部分？这不太可行，因为很难确定要擦除的范围。如果曲线的线宽比较宽，就还需要保证擦除的边界和曲线末端垂直，问题就变得很复杂了。

现在再重新看看这张图

我们是不是可以将percent这个参数理解成t值，然后通过贝赛尔曲线方程去计算出中间所有的点，用直线连接起来，以此模拟绘制贝赛尔曲线的一部分呢？

方法一

我们不再用canvas提供的quadraticCurveTo来绘制曲线，而是通过贝赛尔曲线的方程计算出一系列点，用多端直线来模拟曲线。

这样做的好处时，我们可以很容易的控制绘制的范围。

那么函数实现就变成了这样：

/**
 * 绘制一条曲线路径
 * @param  {Object} ctx canvas渲染上下文
 * @param  {Array<number>} start 起点
 * @param  {Array<number>} end 终点
 * @param  {number} curveness 曲度(0-1)
 * @param  {number} percent 绘制百分比(0-100)
 */
function drawCurvePath( ctx, start, end, curveness, percent ) {

    var cp = [
         ( start[ 0 ] + end[ 0 ] ) / 2 - ( start[ 1 ] - end[ 1 ] ) * curveness,
         ( start[ 1 ] + end[ 1 ] ) / 2 - ( end[ 0 ] - start[ 0 ] ) * curveness
    ];
    
    ctx.moveTo( start[ 0 ], start[ 1 ] );
    
    for ( var t = 0; t <p>接下来就可以通过设置定时器，每隔一段时间调用一次这个方法，并且递增percent</p>
<p>为了动画更加平滑，我们使用<code>requestAnimationFrame</code>来代替定时器</p>
<pre class="brush:php;toolbar:false">nbsp;html>

    
        <title>draw curve</title>
    
    
        <canvas></canvas>
        <script>
            var canvas = document.getElementById( &#39;canvas&#39; );
            var ctx = canvas.getContext( &#39;2d&#39; );
            
            ctx.lineWidth = 2;
            ctx.strokeStyle = &#39;#000&#39;;
            
            var percent = 0;
            
            function animate() {
                
                ctx.clearRect( 0, 0, 800, 800 );
                ctx.beginPath();

                drawCurvePath( 
                    ctx,
                    [ 100, 100 ],
                    [ 200, 300 ],
                    0.2,
                    percent
                );
    
                ctx.stroke();
    
                percent = ( percent + 1 ) % 100;
                
                requestAnimationFrame( animate );
                
            }
            
            animate();
            
            function drawCurvePath( ctx, start, end, curveness, percent ) {
                // ...
            }
        </script>
    

得到的结果：

这样基本实现了我们的需求，但它有一个问题：

测试发现，进行一次lineTo的时间和一次quadraticCurveTo的时间差不多，但是quadraticCurveTo只需要一次就能画出曲线，而使用lineTo则需要数十次。

换言之，用这样的方式绘制曲线，和我们前面的实现方式相比性能下降了数十倍之多。在绘制一条曲线时可能感觉不到区别，但是如果需要同时绘制上千条曲线，性能就会受到很大的影响。

方法二

那有没有什么方法可以做到用quadraticCurveTo来实现绘制完整曲线的一部分呢？

我们再次回到这张图

在中间的某一时刻，例如t=0.25时，它是这样的：

我们注意到，曲线P0-B这一段似乎也是贝赛尔曲线，它的控制点变成了P0，Q0，B。

现在问题就迎刃而解了，我们只需要每次计算出Q0，B，就能得到其中一小段贝赛尔曲线的控制点，然后就可以通过quadraticCurveTo来绘制它了。

代码如下：

/**
 * 绘制一条曲线路径
 * @param  {Object} ctx canvas渲染上下文
 * @param  {Array<number>} start 起点
 * @param  {Array<number>} end 终点
 * @param  {number} curveness 曲度(0-1)
 * @param  {number} percent 绘制百分比(0-100)
 */
function drawCurvePath( ctx, start, end, curveness, percent ) {

    var cp = [
         ( start[ 0 ] + end[ 0 ] ) / 2 - ( start[ 1 ] - end[ 1 ] ) * curveness,
         ( start[ 1 ] + end[ 1 ] ) / 2 - ( end[ 0 ] - start[ 0 ] ) * curveness
    ];
    
    var t = percent / 100;
    
    var p0 = start;
    var p1 = cp;
    var p2 = end;
    
    var v01 = [ p1[ 0 ] - p0[ 0 ], p1[ 1 ] - p0[ 1 ] ];     // 向量<p0>
    var v12 = [ p2[ 0 ] - p1[ 0 ], p2[ 1 ] - p1[ 1 ] ];     // 向量<p1>

    var q0 = [ p0[ 0 ] + v01[ 0 ] * t, p0[ 1 ] + v01[ 1 ] * t ];
    var q1 = [ p1[ 0 ] + v12[ 0 ] * t, p1[ 1 ] + v12[ 1 ] * t ];
    
    var v = [ q1[ 0 ] - q0[ 0 ], q1[ 1 ] - q0[ 1 ] ];       // 向量<q0>

    var b = [ q0[ 0 ] + v[ 0 ] * t, q0[ 1 ] + v[ 1 ] * t ];
    
    ctx.moveTo( p0[ 0 ], p0[ 1 ] );

    ctx.quadraticCurveTo( 
        q0[ 0 ], q0[ 1 ],
        b[ 0 ], b[ 1 ]
    );

}</q0></p1></p0></number></number>

将前面写的页面替换成上面的代码，可以看到得到的结果是一样的：

绘制动画

现在已经解决了最关键的问题，我们可以绘制动画啦。
不过这一部分并不重要，我就不贴代码了。

完整代码可以看这里

相关推荐：

Python之正弦曲线实现方法分析

使用CSS做贝塞尔曲线

css动画之模拟正余弦曲线的实例分享

以上是用canvas繪製一個曲線動畫實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！