在本教程中，我们将学习如何使用 FabricJS 设置椭圆的不透明度。椭圆形是 FabricJS 提供的各种形状之一。为了创建一个椭圆，我们必须创建一个 Fabric.Ellipse 类的实例并将其添加到画布中。我们可以通过添加填充颜色来自定义椭圆对象，消除其边框，甚至更改其尺寸。同样，我们也可以使用 opacity 属性来更改其不透明度。
语法
new fabric.Ellipse({ opacity: Number }: Object)
参数
选项（可选）- 此参数是一个对象 为我们的椭圆提供额外的定制。使用此参数，可以更改与不透明度为属性的对象相关的颜色、光标、边框宽度和许多其他属性。
选项键
不透明度 – 此属性接受数字强> 允许我们控制对象的不透明度。 opacity 属性的默认值为 1。
示例 1
椭圆对象的默认外观
创客贴设计
创客贴设计，一款智能在线设计工具，设计不求人，AI助你零基础完成专业设计！
51 查看详情
让我们看一段代码，看看我们的椭圆对象在 opacity 属性的默认值下是什么样子。在此示例中，我们不会将任何不透明键传递给类，如下所示 –
How to set the opacity of Ellipse using FabricJS?
Observe that here we have not used the opacity property, so by default, it takes the value 1.
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Initiate an ellipse instance var ellipse = new fabric.Ellipse({ left: 115, top: 50, rx: 80, ry: 50, fill: "#ff1493", }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250);
示例 2
将 opacity 属性作为键传递
在此示例中，我们将了解如何分配值opacity 属性更改画布中椭圆对象的不透明度。这里我们使用 0.3 作为不透明度，从而使我们的椭圆对象看起来半透明而不是完全不透明。
How to set the opacity of Ellipse using FabricJS?
Here we have set the opacity at 0.3, which is why the ellipse is less opaque.
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Initiate an ellipse instance var ellipse = new fabric.Ellipse({ left: 115, top: 50, rx: 80, ry: 50, fill: "#ff1493", opacity: 0.3, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250);
以上就是如何使用 FabricJS 设置椭圆的不透明度？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/539684.html
微信扫一扫 
支付宝扫一扫 
