Home > Article > Web Front-end > How to add shadow to triangle using FabricJS?
How to add shadow to triangle using FabricJS?
- 王林forward
- 2023-09-04 09:21:13608browse
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)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>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>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!