canvas 贝塞尔曲线动画绘制

转自https://github.com/hujiulong/blog/issues/1 喜欢的可以去给原作者点赞 谢谢~~~

开个新坑。。鉴于本人数学还给了体育老师，原作者一笔带过的问题本人做了详细分析。没有对比就没有伤害啊啊啊==

ps：目前本人的数学水平不是高等数学，甚至不如高中数学了了了。。。

贝塞尔公式：

二次贝塞尔曲线动态图：

静态图：

三次贝塞尔曲线动态图：

四次贝塞尔曲线动态图：

五次贝塞尔曲线动态图：

三四五次贝塞尔曲线动态图没啥用，看看就行。

最终效果：

由简入繁，首先实现一条静态贝塞尔曲线。此时用户需要提供三个点，p0，控制点，p2

        /*
        *绘制二次贝塞尔曲线路径1
        *@param {Object} 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]
                );
        }

原作者的话：

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

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

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

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

                           图1-1

如上所示：向量BA = 向量OA - 向量OB = [ Ax - Bx , Ay - By]；为了方便展示，长度方向一致的向量也为相等向量。

                                                         图1-2

如图所示，图1-2中向量OA 和 图1-1中的向量BA为相等向量 设向量BA 为 v

 向量OC 垂直于 OA 那么向量OC 坐标为 [ v1, -v0 ] = [Ay - By,Bx-Ax]

把向量OC平移到向量OA的中垂线重合的地方 ，如下图

此时向量OD坐标为向量OC坐标[Ay - By,Bx-Ax]+向量OA中点坐标 此时控制点为D 

而t = [0-1] 决定了 曲线的弯曲程度

/*
        *绘制曲线路径
        *@param {CanvasRenderingContext2D} ctx
        *@param {Array<number>} start
        *@param {Array<number>} end 
        *@param {number} curvature 曲度
        */
function drawCurvePath( ctx, start, end, curveness ) {
            // 计算中间控制点
            /*
            *中间控制点cp cp = start和end中点坐标 + 向量od (向量od长度为起点到终点线段的长度，方向为起点到终点线段的垂直平分线) *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 ]
            ); 
        }

 

转载于:https://www.cnblogs.com/liuxinxin4288/p/9451100.html