Day 8 - 用 canvas 复刻 小画家 绘制圆形/椭圆形

圆形

尝试ellipse

按照搜寻结果，我们一开始可能很直觉的会想到使用 ellipse

ellipse 是 Canvas 2D API 添加椭圆路径的方法。椭圆的圆心在（x,y）位置，半径分别是radiusX 和 radiusY ，按照anticlockwise（默认顺时针）指定的方向，从 startAngle 开始绘制，到 endAngle 结束。

void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);

然後我们就按照文档，将内容都带上

  case "ellipse":
      clearCanvas();
      restore();
      ctx.strokeStyle = activeColor;
      ctx.ellipse(
        initialPoint.x,
        initialPoint.y,
        Math.abs(width),
        Math.abs(height),
        0,
        2 * Math.PI,
        false
      );
      ctx.stroke();
  break;

看来不是我们要的效果，再试试别的参数

贝兹曲线

bezierCurveTo 是 Canvas 2D API 绘制三次贝赛尔曲线路径的方法。该方法需要三个点。第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最後一个点，绘制贝赛尔曲线前，可以通过调用 moveTo() 进行修改

void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

虽然我们对贝兹曲线不熟，但根据文档，似乎可以尝试看看带入我们所拥有的值。

思考

贝兹曲线是拿来绘制曲线的，一般来说，椭圆与圆形的构成就是利用两个弧线，所以我们是不是只要拼接出两个半圆弧线，就可以完成一个圆？
看看程序码怎麽写：

...
case "ellipse":
  clearCanvas();
  restore();
  ctx.strokeStyle = activeColor;
  drawOval(
    ctx,
    initialPoint?.x,
    initialPoint?.y,
    point?.x,
    point?.y
  );
break;
...
          
          
/** 绘制椭圆 **/
const drawOval = (
  ctx: any,
  startX: number,
  startY: number,
  x: number,
  y: number
) => {
  ctx.beginPath();
  ctx.moveTo(startX, startY + (y - startY) / 2);
  ctx.bezierCurveTo(startX, startY, x, startY, x, startY + (y - startY) / 2);
  ctx.bezierCurveTo(x, y, startX, y, startX, startY + (y - startY) / 2);
  ctx.closePath();
  ctx.stroke();
};

酷！成功啦！！