一、 定义

贝塞尔曲线又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋。贝塞尔曲线是计算机图形学中相当重要的参数曲线,常用于计算机图形绘制形状,CSS 动画和许多其他地方。

贝塞尔曲线由控制点定义,这些点可能有 2、3、4 或更多,控制点并不总是在曲线上,曲线总是在控制点的凸包内部,曲线的阶次等于控制点的数量减一,对于两个点我们能得到一条线性曲线(直线),三个点对应一条二阶曲线,四个点 对应一条三阶曲线。

二、用法

根据控制点个数的不同,贝塞尔曲线常用的主要有二次贝塞尔曲线和三次贝塞尔曲线。

1.二次贝塞尔曲线

quadraticCurveTo(cpx,cpy,x,y) //cpx,cpy表示控制点的坐标, x,y表示终点坐标;

如:
二次贝塞尔曲线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二次贝塞尔曲线</title>
</head>
<style>
      body{
        text-align: center;
}
    #canvas{
         border: 1px solid red;
}
</style>
<body>
    <h1>二次贝塞尔曲线</h1>
    <canvas id="canvas" width=300 height=300>
        您的浏览器不支持canvas标签
    </canvas>
    <script>
        function draw() {
            var canvas=document.getElementById('canvas');
            var context=canvas.getContext('2d');
            //绘制起始点、控制点、终点 
            context.beginPath(); 
            context.moveTo(60,200); 
            context.lineTo(145,50); 
            context.lineTo(260,185);  
            context.stroke();    
          
            //绘制2次贝塞尔曲线 
            context.beginPath(); 
            context.moveTo(60,200); 
            context.quadraticCurveTo(145,50,260,185); 
            context.strokeStyle = "red"; 
            context.stroke();   
        }
        draw();
    </script>
</body>
</html>

2. 三次贝塞尔曲线

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
//cp1x,cp1y为第一个控制点的坐标, cp2x,cp2y为第二个控制点的坐标, x,y为终点坐标;
如:
三次贝塞尔曲线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三次贝塞尔曲线</title>
</head>
<style>
    body{
        text-align: center;
    }
    #canvas{
        border: 1px solid red;
    }
</style>
<body>
    <h1>三次贝塞尔曲线</h1>
    <canvas id="canvas" width=300 height=300>
        您的浏览器不支持canvas标签
    </canvas>
    <script>
        function draw() {
            var canvas=document.getElementById('canvas');
            var context=canvas.getContext('2d');  
            //绘制起始点、控制点、终点 
            context.beginPath(); 
            context.moveTo(55,200); 
            context.lineTo(90,110); 
            context.lineTo(180,60); 
            context.lineTo(200,180); 
            context.stroke(); 

            //绘制3次贝塞尔曲线  
            context.beginPath(); 
            context.moveTo(55,200); 
            context.bezierCurveTo(90,110,180,60,200,180); 
            context.strokeStyle = "red"; 
            context.stroke(); 
        }
        draw();
    </script>
</body>
</html>

三、示例

用贝塞尔曲线绘制爱心,代码如下:
如:
爱心

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心绘制</title>
</head>
<style>
    body{
        text-align: center;
    }
    #canvas{
        border: 1px solid black;
    }
</style>
<body>
    <h1>爱心绘制</h1>
    <canvas id="canvas" width=200 height=200>
        您的浏览器不支持canvas标签
    </canvas>
    <script>
        function draw() {
            var canvas=document.getElementById('canvas');
            var context=canvas.getContext('2d');
        
            context.fillStyle = "red";   
            context.beginPath();  
            context.moveTo(90,55);  
            context.bezierCurveTo(90,52,85,40,65,40);
            context.bezierCurveTo(35,40,35,77.5,35,77.5);
            context.bezierCurveTo(35,95,55,117,90,135);
            context.bezierCurveTo(125,117,145,95,145,77.5);
            context.bezierCurveTo(145,77.5,145,40,115,40);
            context.bezierCurveTo(100,40,90,52,90,55);
            context.fill();
        }
        draw();
    </script>
</body>
</html>
Last modification:June 21st, 2021 at 11:24 am
如果觉得我的文章对你有用,请我喝杯奶茶吧