Home > Article > Web Front-end > How to set the opacity of an ellipse using FabricJS?

How to set the opacity of an ellipse using FabricJS?

WBOYforward: 2023-08-24 16:09:131245browse

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

In this tutorial, we will learn how to set the opacity of an ellipse using FabricJS. The oval is one of the various shapes provided by FabricJS. In order to create an ellipse, we must create an instance of the Fabric.Ellipse class and add it to the canvas. We can customize the ellipse 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.Ellipse({ opacity: Number }: Object)

Parameters

Options (optional) - This parameter is a Object Provides additional customization for our ellipse. Using this parameter, you can change the color, cursor, border width and many other properties related to the object for which opacity is the property.

Option Key

Opacity - This property accepts The numbers 强> allow us to control the opacity of the object. opacity The default value of the property is 1.

Example 1

Default appearance of ellipse object

Let's look at a piece of code to see what our ellipse object looks like opacity What does the attribute look like with its default value. In this example we are not passing any opacity key to the class as shown below -

<!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>How to set the opacity of Ellipse using FabricJS?</h2>
      <p>Observe that here we have not used the <b>opacity</b> property, so by default, it takes the value 1. </p>
      <canvas id="canvas"></canvas>

      <script>
         // 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);
      </script>
   </body>
</html>

Example 2

Pass the opacity property as key

In this example we will see how to assign a value to the opacity property to change the opacity of an ellipse object in the canvas. Here we are using 0.3 as the opacity, thus making our ellipse object appear semi-transparent rather than 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>How to set the opacity of Ellipse using FabricJS?</h2>
      <p>Here we have set the <b>opacity</b> at 0.3, which is why the ellipse is less opaque.</p>
      <canvas id="canvas"></canvas>

      <script>
         // 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);
      </script>
   </body>
</html>

The above is the detailed content of How to set the opacity of an ellipse using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

对象 fabric

Statement：

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

Previous article：How to trigger a setInterval loop immediately using JavaScript?Next article：How to trigger a setInterval loop immediately using JavaScript?

See more