Home > Article > Web Front-end > How to set opacity of circle using FabricJS?

How to set opacity of circle using FabricJS?

WBOYforward: 2023-09-03 17:17:07521browse

如何使用 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)

Parameters

Options (optional) - This parameter is a Object 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>
      <!-- Adding the Fabric JS Library-->
      <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&#39;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>

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>
      <!-- Adding the Fabric JS Library-->
      <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>

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!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Practical test-driven development methodsNext article：Practical test-driven development methods

See more