简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

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

How to create a canvas with a waiting cursor using FabricJS?

王林
王林forward
2023-09-16 19:49:091049browse

如何使用 FabricJS 创建带有等待光标的画布？

In this article, we will use FabricJS to create a canvas with a waiting cursor. The wait cursor can be used to indicate a busy program in the background, which can also prevent the user from interacting with the interface. wait is one of the native cursor styles available and can also be used in FabricJS canvas.

FabricJS provides various types of cursors like default, full scroll, crosshair, column resize, row resize, etc. Reuses native cursors behind the scenes. Each cursor looks slightly different depending on the operating system.

Syntax

new fabric.Canvas(element: HTMLElement|String, { defaultCursor: String }: Object)

Parameters

  • Element - This parameter is em> The element itself can be derived using document.getElementById() or the id of the element itself. The FabricJS canvas will be initialized on this element.

  • Options (optional) - This parameter is an object that provides additional customization of our canvas. Using this parameter, you can change many properties related to the canvas, such as color, cursor, border width, etc. defaultCursor is the property where we can set the cursor type

Example 1

The defaultCursor property accepts a string that determines the name of the cursor to use on the canvas. We set it to wait to use the wait cursor. Let’s look at an example of creating a canvas with a wait cursor using FabricJS: 

<!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>Canvas with a wait cursor using FabricJS</h2>
   <p>Bring the cursor inside the canvas to see the changed shape of cursor</p>
   <canvas id="canvas"></canvas>
   <script>
      //Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         defaultCursor: "wait"
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Example 2

In this example, we will add a circle to the canvas along with a wait cursor. 

<!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>Canvas with a wait cursor using FabricJS</h2>
   <p>Here we have added a circle to the canvas along with a wait cursor</p>
   <canvas id="canvas"></canvas>
   <script>
      //Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         defaultCursor: "wait"
      });
      // Initiate a Circle instance
      var circle = new fabric.Circle({
         radius: 50,
         fill: "green"
      });
      // Render the circle in canvas
      canvas.add(circle);
      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 waiting cursor using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

字符串 对象
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 regular expression that only accepts special formulas?Next article：How to create a regular expression that only accepts special formulas?

Related articles

See more