Home >Web Front-end >JS Tutorial >How to create a canvas with a Circle using FabricJS?

How to create a canvas with a Circle using FabricJS?

WBOYforward: 2023-09-09 23:05:031299browse

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

In this tutorial, we will learn how to create a canvas with a Circle object 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.

Syntax

new fabric.Circle({ radius: Number }: Object)

Parameters

Options (optional) - This parameter is a Objects Provides additional customization for our objects. Using this parameter, you can change properties such as color, cursor, stroke width, and many other properties related to a circle with the radius attribute.

Option Key

Radius - This property accepts a Number Determine the radius of the circle. If we don't specify a radius, the circle will not appear on the canvas.

Example 1

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

Let’s See an example of how to add a circle to the canvas. Here we create a circle with a radius of 50px. The stroke attribute represents the border color, and the stroke width specifies its width. We fill our object with a sky blue color, whose hex value is #80daeb.

<!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 canvas with circle using FabricJS</h2>
         <p>Here we have created a circle of radius 50px over a canvas. In addition, we have used the <b>fill</b> and <b>stroke</b> properties to color its body and outline. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         
         // Creating an instance of the fabric.Circle class
         var circle = new fabric.Circle({
            left: 215,
            top: 100,
            radius: 50,
            fill: "#80daeb",
            stroke: "#00b7eb",
            strokeWidth: 2,
         });
         
         // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Use the set method to operate the Circle object

In this example, we use the set method to be the setter of the value . 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>Creating a canvas with circle using FabricJS</h2>
      <p>Here we have used the <b>set</b> method to create a circle of radius 40px and then filled the object with a color. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle();
         canvas.add(circle);
         
         // Use set to set the properties
         circle.set("radius", 40);
         circle.set("fill", "green");
         circle.set({
            stroke: "rgba(133, 187, 101, 0.7)",
            strokeWidth: 4
         });
         circle.set("left", 50);
         circle.set("top", 50);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

The above is the detailed content of How to create a canvas with a Circle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

number 对象 fabric

Statement：

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

Previous article：Static type checking in JavaScript using TypeScriptNext article：Static type checking in JavaScript using TypeScript

See more