How to set opacity of circle using FabricJS?-JS Tutorial-php.cn

How to set opacity of circle using FabricJS?

WBOY

Release： 2023-09-03 17:17:07

forward

549 people have browsed it

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

In this tutorial, we will learn how to set the opacity of a Circle using FabricJS. Circles are one of the various shapes provided by FabricJS. To create a circle, we will create an instance of the Fabric.Circle class and add it to the canvas. We can customize the circular object by adding a fill color, removing its borders, and even changing its dimensions. Likewise, we can also use the opacity property to change its opacity.

Syntax

new fabric.Circle({ opacity: Number }: Object)

Copy after login

Parameters

Options (optional) - This parameter is a Object< /em> Provides additional customization for our circles. With this parameter, you can change the color, cursor, border width, and many other properties associated with objects for which opacity is an attribute

option keys

Opacity - This property accepts a number that allows us to control the opacity of the object. The default value of the opacity attribute is 1.

Example 1

Default appearance of circle objects

Let’s look at a piece of code to see our circle What the object looks like using the default value of the opacity property.
<!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>
Copy after login
Example 2
Passing Opacity Property as Key
In this example we will see how assigning a value to the Opacity property changes Opacity round object in our canvas. Here we are using 0.3 as the opacity, which makes our circular object look semi-transparent instead of completely opaque.
<!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>
Copy after login
The above is the detailed content of How to set opacity of circle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!