How to add shadow to triangle using FabricJS?-JS Tutorial-php.cn

How to add shadow to triangle using FabricJS?

王林

Release： 2023-09-04 09:21:13

forward

638 people have browsed it

如何使用 FabricJS 向三角形添加阴影？

In this tutorial, we will learn how to add a shadow to a triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we must create an instance of the Fabric.Triangle class and add it to the canvas.

Our triangle object can be customized in many ways, such as changing its dimensions, adding a background color, or even adding a shadow. We can add a shadow to the triangle using the Shadow property.

Syntax

new fabric.Triangle({ shadow : fabric.Shadow }: Object)

Copy after login

Parameters

Options(optional) - This parameter is a provided Additional custom objects to our triangle. Using this parameter, you can change properties such as color, cursor, stroke width, and many other properties related to objects whose shadow is an attribute.

OptionKeys

Shadow - This property accepts a fabric.Shadow object, which Allows us to add shadows to our triangle objects.

Example 1

Passing a shadow object to the shadow property

Let’s look at a code example to understand how to create a shadow Property assigns a value to add a shadow to the triangle object. First, we need to create a new fabric.Shadow instance and then assign that instance to our shadow 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>Passing the shadow object to the shadow property</h2>
   <p>You can see that an orange shadow has been added to the triangle</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a shadow instance
      var shadow = new fabric.Shadow({
         color: "orange",
         blur: 20,
      });

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 120,
         top: 70,
         width: 90,
         height: 80,
         fill: "#228b22",
         stroke: "#d8e4bc",
         strokeWidth: 7,
         shadow: shadow,
      });

      // Add it to the canvas
      canvas.add(triangle);
   </script>
</body>
</html>

Copy after login

Example 2

Passing RGBA values to the shadow object

We can also adjust the shadow and give it a blurry appearance by specifying a shadow RGBA values, representing red, green, blue and alpha. Alpha determines the opacity of the 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>Passing an rgba value to the shadow object</h2>
   <p>You can see the shadow created using RGBA colour value</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a shadow instance
      var shadow = new fabric.Shadow({
         color: "rgba(139,0,139,0.8)",
         blur: 20,
      });

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 120,
         top: 70,
         width: 90,
         height: 80,
         fill: "#228b22",
         stroke: "#d8e4bc",
         strokeWidth: 7,
         shadow: shadow,
      });

      // Add it to the canvas
      canvas.add(triangle);
   </script>
</body>
</html>

Copy after login

The above is the detailed content of How to add shadow to triangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!