在本文中，我们将使用 fabricjs 创建一个带有不允许的光标的画布。不允许的游标可用于指示不会执行已请求的任何操作。 not-allowed 是可用的原生光标样式之一，也可以在 fabricjs 画布中使用。
fabricjs 提供各种类型的光标，如默认、全滚动、十字准线、列调整大小、行调整大小等等，它们正在重用本机光标底层。根据操作系统的不同，每个游标看起来都略有不同。
语法new fabric.canvas(element: htmlelement|string, { defaultcursor: string }: object)
参数元素 - 此参数是 元素本身，可以使用 document.getelementbyid() 或 元素本身的 id 派生。 fabricjs 画布将在此元素上初始化。
选项（可选） - 此参数是一个对象，它提供对我们的画布进行额外的定制。使用这个参数可以改变画布相关的颜色、光标、边框宽度等很多属性，其中defaultcursor是一个属性，通过它我们可以设置我们想要的光标类型。
示例 1defaultcursor 属性接受一个字符串，该字符串确定要在画布上使用的光标的名称。我们将其设置为not-allowed，以使用不允许的游标。让我们看一个示例，在 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 not-allowed 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: "not-allowed" }); 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 not-allowed cursor using fabricjs</h2> <p>here we have added a circle to the canvas along with the not-allowed cursor</p> <canvas id="canvas"></canvas> <script> //initiate a canvas instance var canvas = new fabric.canvas("canvas", { defaultcursor: "not-allowed" }); // 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 创建带有不允许的光标的画布？的详细内容。