javascript的貝塞爾曲線是指由一系列控制點(diǎn)所組成的曲線。在前端開(kāi)發(fā)中，貝塞爾曲線經(jīng)常被用來(lái)實(shí)現(xiàn)各種動(dòng)畫(huà)效果。下面我們就來(lái)詳細(xì)講解javascript貝塞爾曲線的相關(guān)知識(shí)。

貝塞爾曲線通常由兩個(gè)或多個(gè)控制點(diǎn)和一個(gè)起點(diǎn)、終點(diǎn)所組成。在拋物線的例子中，我們可以假設(shè)有兩個(gè)控制點(diǎn)，一個(gè)起點(diǎn)和一個(gè)終點(diǎn)。其中起點(diǎn)和終點(diǎn)分別為(x1, y1)和(x4, y4)，控制點(diǎn)1為(x2, y2)，控制點(diǎn)2為(x3, y3)。共有三條線段，其中起點(diǎn)到第一個(gè)控制點(diǎn)、第二個(gè)控制點(diǎn)到終點(diǎn)的兩條線段為連線，第一個(gè)控制點(diǎn)和第二個(gè)控制點(diǎn)之間的線段則為貝塞爾曲線。圖示如下：

//拋物線的起點(diǎn)與終點(diǎn)
var p0 = {x:x1, y:y1};
var p3 = {x:x4, y:y4};
//兩個(gè)控制點(diǎn)
var p1 = {x:x2, y:y2};
var p2 = {x:x3, y:y3};
ctx.beginPath();
ctx.moveTo(p0.x,p0.y);
ctx.bezierCurveTo(p1.x,p1.y,p2.x,p2.y,p3.x,p3.y);
ctx.stroke();

貝塞爾曲線通常有三種類(lèi)型：一次貝塞爾曲線、二次貝塞爾曲線和三次貝塞爾曲線。

• 一次貝塞爾曲線：由兩個(gè)控制點(diǎn)所組成，只有一個(gè)連線段。

ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();

• 二次貝塞爾曲線：由三個(gè)點(diǎn)組成，其中第一個(gè)點(diǎn)為起點(diǎn)，第三個(gè)點(diǎn)為終點(diǎn)，第二個(gè)點(diǎn)為控制點(diǎn)。它可以用一個(gè)二次方程來(lái)描述。

ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.quadraticCurveTo(x2, y2, x3, y3);
ctx.stroke();

• 三次貝塞爾曲線：由四個(gè)點(diǎn)組成，其中第一個(gè)點(diǎn)為起點(diǎn)，第四個(gè)點(diǎn)為終點(diǎn)，第二個(gè)點(diǎn)和第三個(gè)點(diǎn)為控制點(diǎn)。它可以用一個(gè)三次方程來(lái)描述。

ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.bezierCurveTo(x2, y2, x3, y3, x4, y4);
ctx.stroke();

除了貝塞爾曲線的類(lèi)型外，還有關(guān)于曲線平滑度的參數(shù)t。當(dāng)t取值越接近0或1時(shí)，曲線越平滑。當(dāng)t取值為0.5時(shí)，曲線最為平滑。下面是一個(gè)三次貝塞爾曲線的例子：

var t = 0;
function draw() {
var X = (1-t)*(1-t)*(1-t)*x1 + 3*(1-t)*(1-t)*t*x2
+ 3*(1-t)*t*t*x3 + t*t*t*x4;
var Y = (1-t)*(1-t)*(1-t)*y1 + 3*(1-t)*(1-t)*t*y2
+ 3*(1-t)*t*t*y3 + t*t*t*y4;
ctx.beginPath();
ctx.arc(X,Y,2,0,2*Math.PI);
ctx.fill();
t += 0.001;
if (t>1) t = 0;
setTimeout(draw, 1);
}
draw();

貝塞爾曲線可以用來(lái)繪制一些復(fù)雜的圖形，如心形、圓形、花形等，也可以用來(lái)制作一些炫酷的動(dòng)畫(huà)效果。了解javascript的貝塞爾曲線對(duì)于前端開(kāi)發(fā)人員來(lái)說(shuō)是非常有用的知識(shí)點(diǎn)。希望大家可以掌握它，靈活運(yùn)用于實(shí)際工作中。