A, B, C, D, E, F；取前面的
A, B, C三点，计算出
B和
C的中点
B1，以
A为起点，
B为控制点，
B1为终点，利用
quadraticCurveTo绘制一条二次贝塞尔曲线线段；
接下来，计算得出
C与
D点的中点
C1，以
B1为起点、
C为控制点、
C1为终点继续绘制曲线；
依次类推不断绘制下去，当到最后一个点
F时，则以
D和
E的中点
D1为起点，以
E为控制点，
F为终点结束贝塞尔曲线。
OK，算法就是这样，那我们基于该算法再对现有代码进行一次升级改造：
let isDown = false;
let points = [];
let beginPoint = null;
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');// 设置线条颜色
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
canvas.addEventListener('mousedown', down, false);
canvas.addEventListener('mousemove', move, false);
canvas.addEventListener('mouseup', up, false);
canvas.addEventListener('mouseout', up, false);
function down(evt) {
isDown = true;
const { x, y } = getPos(evt);
points.push({x, y});
beginPoint = {x, y};
}
function move(evt) {
if (!isDown) return;
const { x, y } = getPos(evt);
points.push({x, y});
if (points.length > 3) {
const lastTwoPoints = points.slice(-2);
const controlPoint = lastTwoPoints[0];
const endPoint = {
x: (lastTwoPoints[0].x + lastTwoPoints[1].x) / 2,
