如何使用 FabricJS 创建具有背景颜色的画布？-js教程-PHP中文网

如何使用 FabricJS 创建具有背景颜色的画布？

王林

发布： 2023-09-14 20:09:08

转载

898人浏览过

如何使用 fabricjs 创建具有背景颜色的画布？

在本文中，我们将使用 FabricJS 创建具有给定背景颜色的画布。 FabricJS API 提供的默认背景颜色是白色，可以使用第二个参数进行自定义。

语法

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

登录后复制

参数

元素 - 此参数是
选项 - 此参数是一个对象，它提供了额外的可定制性我们的画布和 backgroundColor 就是其中之一，它将帮助我们自定义背景颜色

示例 1

让我们看看如何使用 FabricJS 创建具有背景颜色的画布。由于 FabricJS 在 Canvas API 之上工作，因此我们将使用

AI角色脑洞生成器

一键打造完整角色设定，轻松创造专属小说漫画游戏角色背景故事

176

查看详情

此外，我们将该 id 传递给FabricJS API，以便它可以在

<!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 创建具有背景颜色的画布？的详细内容，更多请关注php中文网其它相关文章！