来自程序猿的爱心表白——贝塞尔曲线讲解及实例

一、概述

Berzier curve是应用于二维图形应用程序的数学曲线。曲线定义：起始点、终止点（也称锚点）、控制点。通过调整控制点，贝塞尔曲线的形状会发生变化。1962年，法国数学家Pierre Bezier第一个研究出了这种矢量绘制曲线的方法，并给出了详细的计算公式，因此按照这样的公式绘制出来的曲线就被命名为贝塞尔曲线。

二、拟合原理

①在平面内选3个不在同一条直线的点A、B、C并且依次用线段连接。如下所示：

②在AB和BC上分别确定点D和点E，使得AD/AB = BE/BC成立：

③连接DE，并在DE上找出一点F，使得DF/DE = AD/AB = BE/BC

④、让选取的点D在第一条线段上从起点A，移动到终点B，并始终满足DF/DE=AD/AB=BE/BC成立。找出所有点F，并将它们连起来。会得到一条非常光滑的曲线，即贝塞尔曲线。具体可观看如下的动图加深理解。

三、简单推导（以三阶为例）

设P0、P02、P2是一条抛物线上三个顺序不同的点。过P0和P2点的两切线交于P1点，在P02点的切线交P0P1和P2P1于P01和P11，则如下比例成立：

这也就是所谓的三切线定理：

当P0，P2固定，引入参数t，令上述比值为 t:(1-t) 则有：

当t从0变化到1时，上面的①和②就表示的是边P0P1和边P1P2，这是两条一次Bezier曲线，将①②代入③，得到：

上式中的t从0变到1时，表示了由顶点P0、P1、P2三点定义的一条二次Bezier曲线。并且表明：这个二次贝塞尔曲线P02可以定义为分别由前两个顶点(P0,P1)和后两个顶点(P1,P2)决定的一次贝塞尔曲线的线性组合。
依次类推，由4个控制点定义的三次贝塞尔曲线P03可被定义为分别由(P0,P1,P2)和(P1,P2,P3)确定的二条二次贝塞尔曲线的线性组合，由(n+1)个控制点Pi(i=0,1,…,n)定义的n次Bezier曲线P0n可被定义为分别由前、后n个控制点定义的两条(n-1)次Bezier曲线P0n-1与P1n-1的线性组合：

由此得到Bezier曲线的递推计算公式：

四、使用贝塞尔曲线画一个爱心

注：该案例是网上的找的，放在这里只是为了方便大家理解与学习贝塞尔曲线。仅供学习使用，如有侵权请私信我。
1、先看一下实现效果：

2、源代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>爱心</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;"></canvas>
</div></body>
<script>window.onload = function () {var canvas = document.getElementById("canvas");//获取画布var ctx = canvas.getContext('2d');//获取图形上下文，并指明绘制的环境类型为2dcanvas.width = 800;//设置画布的宽canvas.height = 800;//设置画布的高drawHeart(ctx,400,400,50,30);//画心}function drawHeart(ctx,x,y,R,rot) {ctx.save();//ctx.translate(x,y);//绘制平移效果的图形ctx.rotate(rot/180*Math.PI);//设置图形的旋转角度ctx.scale(R, R);//设置图形的大小，即使用scale()方法进行缩放。heartPath(ctx);/*ctx.strokeStyle = "red";ctx.lineWidth = "3px";*/ctx.fillStyle = "red";//使用红色填充ctx.shadowColor = "gray";//设置阴影颜色ctx.shadowOffsetX = 5;ctx.shadowOffsetY = 5;ctx.shadowBlur = 5;ctx.fill();//ctx.stroke();ctx.restore();}function heartPath(ctx) {ctx.beginPath();//使用arc()函数画圆ctx.arc(-1,0,1,Math.PI,0,false);ctx.arc(1,0,1,Math.PI,0,false);//貝塞尔曲线画心ctx.bezierCurveTo(1.9, 1.2, 0.6, 1.6, 0, 3.0);ctx.bezierCurveTo( -0.6, 1.6,-1.9, 1.2,-2,0);ctx.closePath();}
</script></html>