Javascript 将图像剪辑为椭圆形

我有一个fabric.JS画布，可以向其中添加对象，但我希望能够将这些对象剪裁成椭圆形

以下是我目前正在使用的（）。我当前可以将对象裁剪为圆形

var canvas=newfabric.canvas（“c”）；
canvas.isDrawingMode=false；
//创建一个矩形对象
var rect=new fabric.rect({
左:100,，
前100名，
填充：“红色”，
宽度：200，
身高：200
});
$（“#clipCircle”）。单击（函数（）{
var obj=canvas.getActiveObject（）；
如果（！obj）返回；
如果（对象clipTo）{
obj.clipTo=null；
}否则{
变量半径=对象宽度<对象高度？（对象宽度/2）：（对象高度/2）；
obj.clipTo=功能（ctx）{
弧（0，0，半径，0，数学PI*2，真）；
};
}
canvas.renderAll（）；
});
//将矩形“添加”到画布上
canvas.add（rect）；
//选择、绘制
$（“#选择”）。单击（函数（）{
canvas.isDrawingMode=false；
});
$（“#绘制”）。单击（函数（）{
canvas.isDrawingMode=true；
});
var-activeObject=null；
canvas.on（'selection:created'，函数（选项）{
activeObject=options.target；
$（“#alpha”）.slider（“选项”、“值”、activeObject.opacity）；
});
canvas.on（'selection:updated'，函数（选项）{
activeObject=options.target；
$（“#alpha”）.slider（“选项”、“值”、activeObject.opacity）；
});
canvas.on（'selection:cleared'，函数（选项）{
activeObject=null；
});
$（“#alpha”）.滑块({
最高：1，
分:0,，
步骤：0.1，
价值：1，
幻灯片：功能（事件、用户界面）{
activeObject&（activeObject.opacity=ui.value）
canvas.requestRenderal（）；
},
停止：功能（事件、用户界面）{
canvas.requestRenderal（）；
}
});
画布{
边框：实心1px#000；
}
字段集{
最大宽度：350px；
}



画
挑选
转圈圈
修剪成椭圆形




控制
不透明性
这是我的建议，你的例子对我很有用

通过在一个轴上将ctx缩放为0.5，可以投影缩放为椭圆形的法线球体，然后恢复ctx

var radius = obj.width < obj.height ? (obj.width / 2) : (obj.height / 2);
obj.clipTo = function(ctx) {
    ctx.scale(0.5, 1);
    ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
    ctx.restore();
};

var radius=obj.width

截图：
这将在剪裁红色立方体对象时生成以下红色形状：