How to set the fill color of an ellipse using FabricJS?-JS Tutorial-php.cn

How to set the fill color of an ellipse using FabricJS?

PHPz

Release： 2023-08-24 14:37:14

forward

1331 people have browsed it

How to set the fill color of an ellipse using FabricJS?

In this tutorial, we will learn how to change the appearance of an Ellipse object by changing its fill color 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 change the fill color using the fill property, which allows us to specify the fill color of an object.

Syntax

new fabric.Ellipse({ fill: String }: Object)

Copy after login

Parameters

Options (optional) - This parameter is a Object< /em> Provides additional customization for our ellipse. Using this parameter, you can change the color, cursor, stroke width, and many other properties associated with the object for which fill is the property.

Option Key

Padding - This property accepts characters The string value allows us to change the fill color of the object. Its default value is rgb(0,0,0), which is black.

Example 1

Default FillThe color of the ellipse object

Let's look at a piece of code that displays the default fill color of an ellipse object in FabricJS. If we completely skip the fill property when creating the ellipse object, it will be rendered black.

<!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 fill color of Ellipse using FabricJS?</h2>
      <p>Observe the ellipse is rendered black as we have not applied the <b>fill</b> property. This is the default fill color. </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: 215,
            top: 100,
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Copy after login

Example 2

Pass fill attribute as key

We can also assign any color name to the fill attribute or RGBA values. In this example, we assigned it the value "skyBlue", changing the fill color accordingly.

<!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 fill color of Ellipse using FabricJS?</h2>
      <p>Here we have used the <b>fill</b> property and used skyBlue color.</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: 215,
            top: 100,
            fill: "skyBlue",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Copy after login

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