此博文不研究其算法，只記錄下其用法。
首先是二次貝塞爾曲線！
函數是這樣的
quadraticCurveTo(cpx, cpy, x, y);
其中cpx爲貝塞爾控制點x；
其中cpy爲貝塞爾控制點y；
其中x爲結束點x座標；
其中y爲結束點y座標。
這裏隱藏了一個開始點，一般用beginPath()和moveTo方法來定義開始點：
源碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
當前瀏覽器不支持canvas
</canvas>
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100, 100);
context.quadraticCurveTo(100, 300, 400, 400);
context.stroke();
}
</script>
</body>
</html>
下面是三次貝塞爾曲線
函數爲bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
其中cp1x爲第一個貝塞爾控制點x軸座標；
其中cp1y爲第一個貝塞爾控制的y軸座標；
其中cp2x爲第二個貝塞爾控制的x軸座標；
其中cp2y爲第二個貝塞爾控制的y軸座標；
其中x爲結束點座標；
其中y爲結束點座標；
同樣這個函數也需要一個moveTo去增加一個開始點！
程序運行截圖如下：
源碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
當前瀏覽器不支持canvas
</canvas>
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
context.beginPath();
context.moveTo(20, 20);
context.bezierCurveTo(20, 700, 200, 100, 700, 500);
context.stroke();
}
</script>
</body>
</html>