绘制二次贝塞尔曲线的几种方式

1.通过turf.js插件绘制

import * as turf from "@turf/turf";
  //P1,p2为起终点
export default function twoPointToCurveLine(p1, p2) {
  let line = [p1, p2].map((item) => item);
  const [p1x, p1y] = line[0];
  const [p2x, p2y] = line[1];
  // mid-point of line:
  const mpx = (p2x + p1x) * 0.5;
  const mpy = (p2y + p1y) * 0.5;
  // angle of perpendicular to line:
  const theta = Math.atan2(p2y - p1y, p2x - p1x) - Math.PI / 2;
  // distance of control point from mid-point of line:
  const distance = turf.distance(line[0], line[1], {
     units: "miles" });
  const offset = distance / 500;
  // location of control point:
  var c1x = mpx + offset * Math.cos(theta);
  var c1y = mpy + offset * Math.sin(theta);
  line.splice(1, 0, [c1x, c1y]);

  return turf.bezierSpline(turf.lineString(line), {
    sharpness: 1,
    resolution: distance > 3000 ? distance : 5000 * distance,
  }).geometry.coordinates;
}

2.通过canvas绘制

ctx.quadraticCurveTo( p1x, p1y, p2x, p2y )

 p1x, p1y：控制点坐标

​ p2x, p2y：结束点坐标

function drawCurve() {
  const canvas = document.getElementById("tutorial");
  if (!canvas.getContext) return;
  let ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(10, 200); //起始点
  let cp1x = 40,
    cp1y = 100; //控制点
  let x = 200,
    y = 200; // 结束点
  //绘制二次贝塞尔曲线
  ctx.quadraticCurveTo(cp1x, cp1y, x, y);
  ctx.stroke();
  ctx.beginPath();
  ctx.rect(10, 200, 10, 10);
  ctx.rect(cp1x, cp1y, 10, 10);
  ctx.rect(x, y, 10, 10);
  ctx.fill();
}