前端canvas基础（二）【贝塞尔曲线】

￡神魔★判官ぃ 2024-05-04 08:14 9阅读 0赞

上一集：[前端canvas基础（一）][canvas]

## 🥞贝塞尔曲线 ##

那么首先我们先来看看[维基百科-贝塞尔曲线][-]对贝塞尔曲线的定义是什么样的：

--------------------

在数学的数值分析领域中，贝塞尔曲线（英语：Bézier curve）是**计算机图形学**中相当重要的参数曲线。更高维度的广泛化贝塞尔曲线就称作**贝兹曲面**，其中贝兹三角是一种特殊的实例。

贝塞尔曲线于**1962年**，由**法国工程师皮埃尔·贝兹**（Pierre Bézier）所广泛发表，他**运用贝塞尔曲线来为汽车的主体进行设计**。贝塞尔曲线最初由**保尔·德·卡斯特里奥于1959年**运用德卡斯特里奥算法开发，以稳定数值的方法求出贝塞尔曲线。

--------------------

##### 🌭建构贝塞尔曲线 #####

**🍪 一、线性曲线**  
线性贝塞尔曲线函数中的t会经过由P0至P1的B（t）所描述的曲线。例如当t=0.25时，B（t）即一条由点径的四分之一处。就像由0至1的连续t，B（t）描述一条由P0至P1的直线

![在这里插入图片描述][d8920f71743c4f158fd272e517c03864.gif_pic_center]

--------------------

**🍨 二、二次曲线**

为建构二次贝塞尔曲线，可以中介点Q0和Q1作为由0至1的t：

由P0至P1的连续点Q0，描述一条线性贝塞尔曲线。  
由P1至P2的连续点Q1，描述一条线性贝塞尔曲线。  
由Q0至Q1的连续点B（t），描述一条二次贝塞尔曲线  
![在这里插入图片描述][d506b1a221af412e875dda0197d1a44c.png]

--------------------

![在这里插入图片描述][b096f74e3b2542a281ff666b60d16b22.gif_pic_center]

--------------------

**🍯 三、高端曲线**

为建构高端曲线，便需要相应更多的中介点。对于**三次曲线**，可由线性贝塞尔曲线描述的中介点Q0、Q1、Q2，和由二次曲线描述的点R0、R1所建构：  
![在这里插入图片描述][9517e90a0b284d5598db7cf5b915b3aa.png]

--------------------

![在这里插入图片描述][0e7a655032bb4e78bdbe11167f6b8f65.gif_pic_center]

--------------------

对于四次曲线，可由线性贝塞尔曲线描述的中介点Q0、Q1、Q2、Q3，由二次贝塞尔曲线描述的点R0、R1、R2，和由三次贝塞尔曲线描述的点S0、S1所建构：  
![在这里插入图片描述][df2ce65d25f74ea7846c2d98c3d19ca1.png]

--------------------

![在这里插入图片描述][c69d6ac00b6644199889dd9d472615e6.gif_pic_center]

--------------------

五阶贝塞尔曲线

![在这里插入图片描述][062746d775474f09b0f344624dc33fec.gif_pic_center]

--------------------

*  看过了维基百科相信你对贝塞尔曲线已经有个大概的认识了，当然，如果还想知道更多一点，你也可以去[贝塞尔曲线-百度百科][- 1]看看。那接下来我们看看在canvas中是怎么应用各种贝塞尔曲线的

## canvas应用贝塞尔曲线 ##

#### 主要的API: ####

*  context.quadraticCurveTo(cpx,cpy,x,y) // 创建二次贝塞尔曲线  
    cpx 贝塞尔控制点的 x 坐标  
    cpy 贝塞尔控制点的 y 坐标  
    x 结束点的 x 坐标  
    y 结束点的 y 坐标
 *  context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) // 创建三次贝塞尔曲线  
    cp1x 第一个贝塞尔控制点的 x 坐标  
    cp1y 第一个贝塞尔控制点的 y 坐标  
    cp2x 第二个贝塞尔控制点的 x 坐标  
    cp2y 第二个贝塞尔控制点的 y 坐标  
    x 结束点的 x 坐标  
    y 结束点的 y 坐标

#### 🍧 实例说明 ####

##### 🍦基础 #####

<!DOCTYPE html>
    <html>
    <head>
        <title>贝塞尔基础</title>
        <meta charset="utf-8" />
        <script type="text/javascript">
            function $$(id) {
          
                return document.getElementById(id);
            }
            window.onload = function () {
          
                var cnv = $$("canvas");
                var cxt = cnv.getContext("2d");
                //绘制贝塞尔曲线
                cxt.moveTo(20, 80);
                cxt.quadraticCurveTo(100, 20, 160, 120);//创建二次贝塞尔曲线
                cxt.moveTo(200,80)
                var cx1 = 200;
                var cy1 = 80;
                var cx2 = 280;
                var cy2 = 150;
                var endX = 380;
                var endY = 30;
                cxt.bezierCurveTo(cx1, cy1, cx2, cy2, endX, endY); //创建三次贝塞尔曲线
                cxt.stroke()
            }
        </script>
    </head>
    <body>
        <canvas id="canvas" width="400" height="150" style="border:1px dashed gray;"></canvas>
    </body>
    </html>

![在这里插入图片描述][287eeebdc0994074a6b571bb45e6a118.png]

##### 🍩N叶草 #####

<!DOCTYPE html>
    <html>
    <head>
        <title>N叶草</title>
        <meta charset="utf-8" />
        <script type="text/javascript">
            function $$(id) {
          
                return document.getElementById(id);
            }
            window.onload = function () {
          
                var cnv = $$("canvas");
                var cxt = cnv.getContext("2d");
    
                createLeaf(cxt, 8, cnv.width / 2, cnv.height / 2, 10, 100);
                //定义填充颜色为浅绿色
                cxt.fillStyle = "#00FF99";
                cxt.fill();
            }
            /*
             * createLeaf()用于绘制N叶草
             * n：n片
             * dx、dy：花朵中心位置的坐标
             * size：控制花朵的大小
             * length：控制花瓣长度
             */
            function createLeaf(cxt, n, dx, dy, size, length) {
          
                cxt.beginPath();
                cxt.moveTo(dx, dy + size);
                var degree = 2 * Math.PI / n;
                for (var i = 1; i < n + 1; i++) {
          
                    //计算控制点坐标
                    var cx1 = Math.sin((i - 1) * degree) * length + dx;
                    var cy1 = Math.cos((i - 1) * degree) * length + dy;
                    var cx2 = Math.sin(i * degree) * length + dx;
                    var cy2 = Math.cos(i * degree) * length + dy;
                    //计算结束点的坐标
                    var x = Math.sin(i * degree) * size + dx;
                    var y = Math.cos(i * degree) * size + dy;
                    cxt.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
                }
                cxt.closePath();
            }
        </script>
    </head>
    <body>
        <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
    </body>
    </html>

![在这里插入图片描述][90536aace7ba4c42868e4050c51ce5af.png]

*  这里，我们在一条路径中连续定义首尾相连的多段贝塞尔曲线，其中每段三次贝塞尔曲线的起点和终点都落在圆心为（dx，dy）、半径为size的圆弧上，而每段圆弧的两个控制点落在圆心为（dx，dy）、半径为length的圆弧上，于是形成了N叶草的图形。其中，起点、终点和控制点坐标是使用正弦和余弦函数计算出来的。  
    总的来说，使用二次或三次贝塞尔曲线来绘制一个图形是相当有挑战的，因为这不像在矢量绘图软件Adobe Illustrator（简称AI）里那样有即时的视觉反馈（所见即所得）。所以用它来画复杂图形比较麻烦。但是从理论上来说，任何复杂的图形都可以用贝塞尔曲线绘制出来！这也是贝塞尔曲线强大之处。

## 🍬最后 ##

关于canvas中贝塞尔曲线的相关信息就先总结到这里，后面有时间会持续更新

[canvas]: https://blog.csdn.net/weixin_51033461/article/details/125634170
[-]: https://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A
[d8920f71743c4f158fd272e517c03864.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/330f09df4d0f47e9ababe64c2a737f7f.gif
[d506b1a221af412e875dda0197d1a44c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/ebdbbb708acc4acb89ce2328b1f0b711.png
[b096f74e3b2542a281ff666b60d16b22.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/26d6600474ed4d0d9ba97af0dd1f8dcc.gif
[9517e90a0b284d5598db7cf5b915b3aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/1109b55bdce741fd809c6a94ccda0b3e.png
[0e7a655032bb4e78bdbe11167f6b8f65.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/b681ee416a7b4e0a86190e1971548980.gif
[df2ce65d25f74ea7846c2d98c3d19ca1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/bc5954b2db4d4c28b87a9f974e3c89ad.png
[c69d6ac00b6644199889dd9d472615e6.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/6a75f23944294fa2b91e6cde26abcc90.gif
[062746d775474f09b0f344624dc33fec.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/5621439b4f5942f9aa0c35541696d45a.gif
[- 1]: https://baike.baidu.com/item/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF/1091769?fr=aladdin
[287eeebdc0994074a6b571bb45e6a118.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/e930df2d502445129f0c3821580c0bbf.png
[90536aace7ba4c42868e4050c51ce5af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/3b2062c36f5540c6915068ab6be1d5e8.png