前端绘制椭圆

在前端绘制椭圆可以使用 CSS 或者 Canvas API。

使用 CSS：

可以通过设置元素的 border-radius 属性来实现椭圆形状，例如：

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 100px / 50px;
}

其中，border-radius 的第一个值为椭圆的水平半径，第二个值为垂直半径。由于是使用 border-radius 来实现的，所以该方法只适用于元素的边框为椭圆形状的场景，无法实现填充椭圆形状。

使用 Canvas API：

Canvas API 提供了绘制椭圆的方法，可以通过以下代码实现：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radiusX = 100;
const radiusY = 50;

ctx.beginPath();
ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
ctx.stroke();

其中，ellipse 方法的第一个参数为椭圆中心的 x 坐标，第二个参数为 y 坐标，第三个参数为椭圆的水平半径，第四个参数为垂直半径，第五个参数为旋转角度，第六个参数为起始角度，第七个参数为结束角度。以上代码只是简单的绘制了一个椭圆形状，如果需要填充椭圆形状，可以使用 fill 方法。