如何使用 FabricJS 设置圆的不透明度？

在本教程中，我们将学习如何使用 fabricjs 设置 circle 的不透明度。圆形是 fabricjs 提供的各种形状之一。为了创建一个圆圈，我们将创建一个 fabric.circle 类的实例并将其添加到画布中。我们可以通过添加填充颜色来自定义圆形对象，消除其边框，甚至更改其尺寸。同样，我们也可以使用 opacity 属性来更改其不透明度。
语法new fabric.circle({ opacity: number }: object)
参数选项（可选） - 此参数是一个对象为我们的圈子提供额外的定制。使用此参数，可以更改与不透明度为属性的对象相关的颜色、光标、边框宽度和许多其他属性
选项键不透明度 - 此属性接受数字允许我们控制对象的不透明度。 opacity 属性的默认值为 1。
示例 1圆形对象的默认外观
让我们看一段代码，看看我们的圆形对象在使用 opacity 属性的默认值时是什么样子。
<!doctype html><html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>setting the opacity of circle using fabricjs</h2> <p>here we haven't used the <b>opacity</b> property, but by default, it is set to 1. this is the default appearance. </p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); var circle = new fabric.circle({ left: 115, top: 50, radius: 50, fill: "#ff1493" }); // adding it to the canvas canvas.add(circle); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); </script> </body></html>
示例 2将不透明度属性作为键传递
在此示例中，我们将了解为不透明度属性分配值如何更改不透明度我们画布中的圆形对象。这里我们使用 0.3 作为不透明度，这使得我们的圆形对象看起来半透明而不是完全不透明。
<!doctype html><html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>setting the opacity of circle using fabricjs</h2> <p>here we have set the <b>opacity</b> at 0.3, which is why the circle appears dull. </p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); var circle = new fabric.circle({ left: 115, top: 50, radius: 50, fill: "#ff1493", opacity: 0.3 }); // adding it to the canvas canvas.add(circle); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); </script> </body></html>
以上就是如何使用 fabricjs 设置圆的不透明度？的详细内容。

如何使用 FabricJS 设置圆的不透明度？

VIP推荐