Home > Article > Web Front-end > How to set the stroke width of a canvas circle using Fabric.js?

How to set the stroke width of a canvas circle using Fabric.js?

WBOYforward: 2023-08-28 13:53:05709browse

如何使用 Fabric.js 设置画布圆的描边宽度？

The stroke and stroke width properties are used to set the stroke color and stroke width of the canvas circle. The Circle class contains different properties, but to set the stroke color and width, we use the stroke and stroke-width properties. The strokeWidth property is used to specify the width of the canvas circle.

Fabric.js Circle class is used to provide circular shapes through Fabric.Circle objects. Circle object is used to provide a circular shape and the circle is movable and can be stretched as per the requirement. The stroke, color, width, height and fill color of the circle are all customizable. Compared with the canvas class, the Circle class provides rich functions.

grammar

The following is the syntax of text objects -

fabric.Circle({
   radius: number,
   stroke: string,
   strokeWidth: number
});

parameter

radius - used to specify the radius of the circle

Stroke - Specifies the color of the stroke.

Stroke width - Used to specify the width of the stroke

step

Follow the steps given below to set the horizontal tilt of the canvas circle using Fabric.js -

Step 1 - Include the Fabric.js library in the HTML file

Step 2 - Create a new canvas element in the HTML file

Step 3 - Initialize the canvas element in JavaScript code

Step 4 - Create a new Fabric.js Circle class object and set the skewX property to the desired circle value

Step 5 - Add Circle Object to Canvas

Example

Let’s see how to set the stroke color and stroke width of the canvas circle using Fabric.js -

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Setting the Stroke Color and Stroke Width of a Canvas Circle</h2>
      <p>Please click on the canvas circle to see the controlling corners.</p>
      <p>Strke color: green, stoke width: 20</p>
      <canvas id="strokecanvas"></canvas>
      <script>
         // Initiating a canvas instance
         var canvas = new fabric.Canvas('strokecanvas'); 
       
         // Create a instance of fabric.Circle Class
         var circle6 = new fabric.Circle({
            top: 50,
            left: 50,
            radius: 70,
            stroke: "green",
            strokeWidth: 20
         }); 
         
         // Adding the Canvas
         canvas.add(circle6);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(350);
      </script> 
   </body> 
</html>

This code will create a new canvas circle element with the specified ID, create a new Fabric.js Circle class object, and set the stroke color and stroke width of the circle using the stroke and stroke width properties, and add the circle object to the canvas. The circle will appear tilted horizontally on the canvas.

Example

Let's look at another example, we can set the stroke color and stroke width of the canvas circle by using the stroke and stroke width methods and the left, top, fill, radius and other properties.

<html>
   <head> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Setting the Stroke Color and Stroke Width of a Canvas Circle</h2>
      <p>Please click on the canvas circle to see the controlling corners.</p>
      <p>Strke color: blue, stoke width: 20</p>
      <canvas id="canvasstroke"></canvas>

      <script>
         var canvas = new fabric.Canvas('canvasstroke'); 
         var circle5 = new fabric.Circle({
            top: 60,
            left: 60,
            fill: "violet",
            radius: 70,
            stroke: "blue",
            strokeWidth: 20
         }); 
         
         canvas.add(circle5);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(500);
      </script> 
   </body> 
</html>

This code will create a new canvas circle element with the specified ID and size, create a new Fabric.js Circle class object, and use the strokeWidth property to set the canvas circle to the stroke color and stroke width, and set the stroke width to the canvas circle element. Class object added to canvas. The circle will appear on the canvas with the dimensions we defined in the example.

in conclusion

In this article, we demonstrate through examples how to set the stroke width and stroke color of a canvas circle. We see two different examples here where we use the stroke and stroke-width properties to set the stroke width and color of a circular canvas. In the first example, we use the Stroke and StrokeWidth properties to set the color and width of the canvas circle. For the second example, we used the Stroke and StrokeWidth property methods with various size parameters (such as Left, Top, Fill, etc.) to set the width and color stroke of the circular canvas.

The above is the detailed content of How to set the stroke width of a canvas circle using Fabric.js?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html JS 对象 canvas fabric

Statement：

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

Previous article：How to create a function from a string in JavaScript?Next article：How to create a function from a string in JavaScript?

See more

How to set the stroke width of a canvas circle using Fabric.js?

grammar

parameter

step

Example

Example

in conclusion

Related articles