简单记录 Canvas 中绘制椭圆形

虽然可以直接用 CanvasRenderingContext2D.ellipse() （Canvas 2D API 添加椭圆路径的方法） 方法去绘制。但因为考虑到浏览器兼容性的问题，所以还需要有个备选方案。

Canvas中绘制椭圆的方法有压缩法，计算法，贝塞尔曲线法等多种方式，下面代码中用的是最简单的压缩法。

import { useEffect, useRef } from 'react';

export default function GroupCanvas() {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current.getContext) return;

    let ctx = ref.current.getContext('2d');
    ctx.strokeStyle = '#289FD9';
    ctx.lineWidth = 1;
    ellipse(75, 120, 37, 25, 0, 0, Math.PI * 2);

    function ellipse(
      x,
      y,
      radiusX,
      radiusY,
      rotation,
      startAngle,
      endAngle,
      anticlockwise,
    ) {
      ctx.beginPath();
      if (ctx.ellipse) {
        ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
      } else {
        let r = radiusX > radiusY ? radiusX : radiusY; //用大的数为半径
        let scaleX = radiusX / r; //计算缩放的x轴比例
        let scaleY = radiusY / r; //计算缩放的y轴比例
        ctx.save(); //保存当前环境的状态。
        ctx.translate(x, y); //移动到圆心位置
        ctx.rotate(rotation); //进行旋转
        ctx.scale(scaleX, scaleY); //进行缩放
        ctx.arc(0, 0, r, startAngle, endAngle, anticlockwise); //绘制圆形
        ctx.restore(); //返回之前保存过的路径状态和属性。
      }
      ctx.stroke();
    }
  }, []);
  return <canvas ref={ref}></canvas>;
}

参考链接：
https://blog.csdn.net/gao_xu_520/article/details/58588020
https://www.cnblogs.com/flybeijing/p/canvas_ellipse.html
https://www.cnblogs.com/fangsmile/p/9530226.html