在本文中，我们将使用 fabricjs 创建一个带有等待光标的画布。等待光标可用于指示后台的繁忙程序，这也会阻止用户与界面交互。 wait 是可用的原生光标样式之一，也可以在 fabricjs 画布中使用。
fabricjs 提供各种类型的光标，如默认、全滚动、十字准线、列调整大小、行调整大小等.在幕后重用本机光标。根据操作系统的不同，每个游标看起来都略有不同。
语法new fabric.canvas(element: htmlelement|string, { defaultcursor: string }: object)
参数元素 - 此参数是 元素本身，可以使用 document.getelementbyid() 或 元素本身的 id 派生。 fabricjs 画布将在此元素上初始化。
选项（可选） - 此参数是一个对象，它提供对我们的画布进行额外的定制。使用这个参数，可以改变画布相关的颜色、光标、边框宽度等很多属性，其中defaultcursor是我们可以设置光标类型的属性
示例 1defaultcursor 属性接受一个字符串，该字符串确定要在画布上使用的光标的名称。我们将其设置为等待以使用等待光标。让我们看一个使用 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>
示例 2在此示例中，我们将在画布上添加一个圆圈以及等待光标。
<!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>
以上就是如何使用 fabricjs 创建带有等待光标的画布？的详细内容。