Home > Article > Web Front-end > How to create a canvas with an ellipse using FabricJS?

How to create a canvas with an ellipse using FabricJS?

WBOYforward: 2023-09-12 23:05:021295browse

如何使用 FabricJS 创建带有椭圆的画布？

In this tutorial, we will learn how to create a canvas with an Ellipse object using FabricJS. The oval is one of the various shapes provided by FabricJS. To create an ellipse, we will create an instance of the Fabric.Ellipse class and add it to the canvas.

Syntax

new fabric.Ellipse({ rx: Number, ry: Number }: Object)

Parameters

Options(optional) - This parameter is a provided Additional custom objects to our ellipse. Use this parameter to change the color, cursor, stroke width, and many other properties associated with the ellipse object, where rx and ry are properties of the ellipse object.

Option Key

rx - This property accepts numbers , determine the horizontal radius of the ellipse. If we do not specify a horizontal radius, the ellipse will not appear on the canvas.
ry - This property accepts a number, which determines the vertical radius of the ellipse . If we don't specify the vertical radius, the ellipse will not appear on the canvas.

Example 1

Create an instance of Fabric.Ellipse() and add it to our canvas

Let’s see An example of how to add an ellipse to the canvas. Here we create an object with a horizontal radius of 80 pixels and a vertical radius of 50 pixels. We use sky blue to fill the object with the hexadecimal value #87ceeb.

<!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 create a canvas with an ellipse using FabricJS?</h2>
      <p>Here we have created an ellipse object and set it over a canvas.</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: 100,
            fill: "#87ceeb",
            rx: 80,
            ry: 50,
         });
         
         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Use the set method to operate the Ellipse object

In this example, we useset Method, which is a setter for values. Any properties related to stroke, stroke width, radius, scale, rotation, etc. can be changed using this method.

<!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 create a canvas with an ellipse using FabricJS?</h2>
      <p>Here we have used the <b>set</b> method to create an ellipse object over the canvas. </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();
         
         // Using set to set the properties
         ellipse.set("rx", 90);
         ellipse.set("ry", 40);
         ellipse.set("fill", "#1e90ff");
         ellipse.set({
            stroke: "rgba(245,199,246,0.5)",
            strokeWidth: 6
         });
         ellipse.set("left", 150);
         ellipse.set("top", 90);
         
         // 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 create a canvas with an ellipse using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

对象 li fabric

Statement：

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

Previous article：How to import SVG files in JavaScript?Next article：How to import SVG files in JavaScript?

See more