前端基礎_貝塞爾和二次方曲線

　貝塞爾和二次方曲線

貝塞爾曲線可以是二次和三次方的形式，常用于繪制複雜而有規律的形狀。

繪制貝塞爾曲線主要使用bezierCurveTo方法。該方法可以說是lineTo的曲線版，将從目前坐标點到指定坐标點中間的貝塞爾曲線追加到路徑中。該方法的定義如下。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

該方法使用6個參數。繪制貝塞爾曲線的時候，需要兩個控制點，cp1x為第一個控制點的橫坐标，cp1y為第一個控制點的縱坐标；cp2x為第二個控制點的橫坐标，cp2y為第二個控制點的縱坐标；x為貝塞爾曲線的終點橫坐标，y為貝塞爾曲線的終點縱坐标。

繪制二次樣條曲線，使用的方法是quadraticCurveTo。該方法的定義如下。

quadraticCurveTo(cp1x, cp1y, x, y)

兩種方法的差別如圖17.8所示。它們都是一個起點一個終點（圖中的藍點），但二次方貝塞爾曲線隻有一個（紅色）控制點，而三次方貝塞爾曲線有兩個。

參數x和y是終點坐标，cp1x和cp1y是第一個控制點的坐标，cp2x和cp2y是第二個控制點的坐标。

【例17.5】下面看一下使用bezierCurveTo方法的執行個體。本例中使用bezierCurveTo方法繪制一個紅色實心的紅心。

實作的主要代碼如下。

context.beginPath();

context.fillStyle = '#c00';

context.strokeStyle = '#c00';

context.moveTo(75,40);

context.bezierCurveTo(75,37,70,25,50,25);

context.bezierCurveTo(20,25,20,62.5,20,62.5);

context.bezierCurveTo(20,80,40,102,75,120);

context.bezierCurveTo(110,102,130,80,130,62.5);

context.bezierCurveTo(130,62.5,130,25,100,25);

context.bezierCurveTo(85,25,75,37,75,40);

context.fill();

context.stroke();

從上面的代碼可以看出，紅心的繪制主要是多次使用了三次方貝塞爾曲線繪制的。

【例17.6】下面再來看一下使用quadraticCurveTo方法繪制二次方線的執行個體。本例主要是繪制了一個用于解釋說明的對話框。其實作的主要代碼如下。

context.beginPath();

context.moveTo(75,25);

context.strokeStyle = '#c00';

context.quadraticCurveTo(25,25,25,62.5);

context.quadraticCurveTo(25,100,50,100);

context.quadraticCurveTo(50,120,30,125);

context.quadraticCurveTo(60,120,65,100);

context.quadraticCurveTo(125,100,125,62.5);

context.quadraticCurveTo(125,25,75,25);

context.stroke();

context.fill();

本例在浏覽器中實作的效果。

相對來說，二次樣條曲線的繪制比貝塞爾曲線的繪制容易一些，因為繪制貝塞爾曲線時需要兩個控制點，而繪制二次樣條曲線時隻需要一個控制點。是以，quadraticCurveTo方法隻需要4個參數就可以了，分别是控制點的橫坐标、控制點的縱坐标、二次樣條曲線終點的橫坐标、二次樣條曲線終點的縱坐标。

https://www.bilibili.com/video/BV1Gv4y1Q7px/?p=2&spm_id_from=pageDriver&vd_source=a7816e3b2a3a67ac39dc87f6bf92421c

https://www.bilibili.com/video/BV1Gv4y1Q7px/?p=2&spm_id_from=pageDriver&vd_source=a7816e3b2a3a67ac39dc87f6bf92421c