Javascript fabric.js：如何制作带有阴影等笔划的椭圆形图像？

我一直试图将图像显示为椭圆形，但运气不佳

下面是我的代码片段，它适用于圆形，但当我们将图像从矩形转换为椭圆时，会有一些间隙

如何在html画布中添加rx和ry？ 这就是当前代码如何将我的矩形图像转换为椭圆，在高度和宽度上存在间隙，它们不准确

示例输出图像：

fabric.util.loadImage（imageURL，函数（img）{
var oImg=新织物图像（img）；
if（slot.image_shape==“椭圆”）{
设shadow=（options&&options.shadow）|{
真的，
};
常数半径=
oImg.width

不幸的是，我不知道您实际使用的是哪个fabric.js版本，但从2.4.0开始，您可以使用该属性。与Ellipse类一起，您可以直接使用椭球形状作为遮罩-这让您可以直接输入rx和ry的值，而不仅仅是半径

下面是一个例子：

var canvas=window.\u canvas=newfabric.canvas（'canvas'）；
fabric.Image.fromURL（'https://picsum.photos/200/200，函数（img）{
img.set({
哈斯：错，
哈斯：错，
左:0,，
排名：0，
克利帕斯：新面料。椭圆({
rx:100，
ry:50，
原文：“中心”，
原文：'中心'，
}),
});
canvas.add（img）；
})；

---

我对fabric.js不太熟悉，但是如果你想从图像中创建一个椭圆形，为什么不使用css？（边框半径，方框阴影）

fabric.util.loadImage(imageURL, function (img) {
      var oImg = new fabric.Image(img);


      if (slot.image_shape == "ellipse") {
        let shadow = (options && options.shadow) || {
          affectStroke: true,
        };
        const radius =
          oImg.width < oImg.height ? oImg.width / 2 : oImg.height / 2;
        oImg.set({
          clipTo: function (ctx) {
            return ctx.arc(0, 0, radius, 0, Math.PI * 2, false);
          },
        });
      }