box-shadow和filter: drop-shadow的异同，及使用canvas绘制椭圆

一、box-shadow 和 filter: drop-shadow的异同：

• filter: drop-shadow 和 box-shadow 都可以用于创建阴影效果，但它们之间有一些重要的区别：

1、适用对象：
1、filter: drop-shadow* 适用于元素的整个内容区域，包括内容和透明区域。这意味着如果元素有透明部分，阴影也会在透明部分下方显示。
box-shadow 适用于元素的边框框盒（border box），不包括透明部分。它创建的阴影在元素的边框周围显示，不会受到元素内容的影响。
2、用法：
filter: drop-shadow 主要用于给图像或文本等元素添加阴影效果，而不会影响布局。
box-shadow 主要用于为元素的边框周围创建阴影，可以用于任何具有边框的元素，例如 div、按钮等。
3、性能：
filter: drop-shadow 可能会对性能产生较大影响，特别是在需要实时渲染的动画或大量元素应用时。因为它会对元素及其内容应用效果。
box-shadow 通常比 filter: drop-shadow 性能更好，因为它只在元素的边框周围创建阴影，不会影响元素内容的布局和绘制。

• 因此，选择使用哪种阴影效果取决于你的需求和性能考虑。如果需要在元素的内容上方添加阴影并且不影响布局，则可以使用 filter: drop-shadow。如果只需要在元素的边框周围创建阴影，而不影响元素的内容，可以使用 box-shadow。

二、使用canvas绘制椭圆及添加描边

// 定义椭圆的中心点和半轴长度
var x = 100; // 椭圆中心点的 x 坐标
var y = 100; // 椭圆中心点的 y 坐标
var radiusX = 50; // 椭圆的半长轴长度
var radiusY = 30; // 椭圆的半短轴长度

// 开始绘制路径
ctx.beginPath();

// 绘制椭圆
ctx.ellipse(x, y, radiusX, radiusY, 0, 0, 2 * Math.PI);

// 设置填充颜色
ctx.fillStyle = 'lightblue';

// 填充椭圆
ctx.fill(); // 填充