search

Home >Web Front-end >JS Tutorial >How to create a circle with background color using FabricJS?

How to create a circle with background color using FabricJS?

WBOY
WBOYforward
2023-08-30 16:37:091163browse

如何使用 FabricJS 创建一个带有背景颜色的圆形？

In this tutorial, we will create a circle with a background color using FabricJs. Circles are one of the various shapes provided by FabricJS. In order to create a circle, we must create an instance of the Fabric.Circle class and add it to the canvas. The backgroundColor property allows us to specify a color for the background of an object. It is the color of the square container (where the circle is).

Syntax

new fabric.Circle({ backgroundColor: String }: Object)

Parameters

  • Options (optional) - This parameter is a Objects Provides additional customization for our objects. Using this parameter, you can change properties related to the Circle such as color, cursor, stroke width, and many other properties, of which backgroundColor is its property.

    • ul>

    Option Key

    • ##backgroundColor - This property acceptsString Determines the color of the object's background. The value can be a hexadecimal value, an rgba value, or just the name of the color we want the background to be.

    Example 1

    Passing the backgroundColor property as a key with a hexadecimal value

    Let's look at an example of assigning a background color to a circular object using hexadecimal color values. In this example, we used the hexadecimal color code

    #d0db61, which is a dark khaki color. 

    <!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>Creating a circle with a background colour using FabricJS</h2>
      <p>Notice the dark-khaki background around the circle. It appears as we have applied the <b>backgroundColor</b> property and assigned it a Hex color code. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            radius: 50,
            fill: "#74c365",
            stroke: "#00b7eb",
            strokeWidth: 2,
            backgroundColor: "#d0db61",
         });

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

    Example 2

    Passing backgroundColor property as key with rgba value

    We can use

    RGBA (red, blue, green, and alpha) values ​​instead of hexadecimal color codes. The alpha parameter specifies the opacity of the color. In this example, we used the rgba value (255,0,0,0.7), which is red with an opacity of 0.7. 

    <!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>Creating a circle with a background colour using FabricJS</h2>
      <p>Notice the orange-red background around the circle. Here we have used the <b>backgroundColor</b> property and assigned it an &#39;rgba&#39; value. </p>
      <canvas id="canvas"></canvas>
 
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            radius: 50,
            fill: "green",
            stroke: "blue",
            strokeWidth: 2,
            backgroundColor: "rgba(255,0,0,0.7)",
         });

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

The above is the detailed content of How to create a circle with background color 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：How to change the shape of a text area using JavaScript?Next article：How to change the shape of a text area using JavaScript?

Related articles

See more