在本文中，我们将使用 fabricjs 创建具有给定背景颜色的画布。 fabricjs api 提供的默认背景颜色是白色，可以使用第二个参数进行自定义。
语法new fabric.canvas(element: htmlelement|string, { backgroundcolor: string }: object)
参数元素 - 此参数是 元素本身，可以使用 document.getelementbyid() 或 元素本身的 id 派生。 fabricjs 画布将在此元素上初始化。
选项 - 此参数是一个对象，它提供了额外的可定制性我们的画布和 backgroundcolor 就是其中之一，它将帮助我们自定义背景颜色
示例 1让我们看看如何使用 fabricjs 创建具有背景颜色的画布。由于 fabricjs 在 canvas api 之上工作，因此我们将使用 标签创建一个 html 元素，并为其指定一个 id。
此外，我们将该 id 传递给fabricjs api，以便它可以在 标记上初始化 fabricjs canvas 实例。在第二个参数中，我们将传递一个带有键backgroundcolor的对象以及我们想要的颜色值。
<!doctype html><html><head> <!-- adding the fabricjs library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"> </script></head><body> <h2>how to create a canvas with a background color using fabricjs</h2> <p>here we have used 'cyan' as the background color.</p> <canvas id="canvas"> </canvas> <script> // initiate a canvas instance and add backgroundcolor var canvas = new fabric.canvas('canvas', { backgroundcolor: 'cyan' }); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); </script></body></html>
示例 2我们再举一个例子。这里我们将创建一个具有背景颜色的画布，并在画布上创建一个 circle 对象。
<!doctype html><html><head> <!-- adding the fabricjs library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"> </script></head><body> <h2>how to create a canvas with a background color using fabricjs</h2> <p>here we have created a canvas with a background color and a circle object on the canvas</p> <canvas id="canvas"> </canvas> <script> // initiate a canvas instance and add backgroundcolor var canvas = new fabric.canvas('canvas', { backgroundcolor: 'cyan' }); // initiate a circle instance var circle = new fabric.circle({ radius: 50, fill: "red", hovercursor: 'not-allowed', }); // render the circle in canvas canvas.add(circle); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); </script></body></html>
以上就是如何使用 fabricjs 创建具有背景颜色的画布？的详细内容。