如何使用 FabricJS 创建画布?

fabricjshtml5 canvasjavascript更新于 2025/2/17 9:48:17

在本文中，我们将使用 FabricJS 创建画布，但在此之前，让我们先了解一下什么是画布。为了在网页上绘制图形，我们有一个名为 Canvas API 的 Web API。此 API 适合绘制基本形状，但添加交互或绘制复杂形状变得非常困难。因此，FabricJS 应运而生，它是一个基于 Canvas API 构建的库。要使用 FabricJS，需要做的第一件事是创建一个 FabricJS Canvas。

语法

new fabric.Canvas(element: HTMLElement|String, options: Object)

参数

element − 此参数是 <canvas> 元素本身，可以使用 document.getElementById() 或 <canvas> 元素本身的 id 派生。FabricJS 画布将在此元素上初始化。
options(可选) − 此参数是一个对象，它为我们的画布提供额外的自定义。使用此参数，我们可以更改画布的不同属性，例如颜色、光标、边框宽度和许多其他属性。

示例 1

将 id 作为字符串传递

让我们看一个使用 FabricJS 创建 Canvas 的代码示例。由于 FabricJS 在 Canvas API 之上工作，我们将使用 <canvas> 标记创建一个 HTML 元素并为其指定一个 id。此外，我们将该 id 传递给 FabricJS API，以便它可以在 <canvas> 标记上初始化 FabricJS Canvas 实例。

<!DOCTYPE html>
<html>
<head>
   <!-- 添加 FabricJS 库 ->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js">
   </script>
</head>
<body>
   <h2>如何使用 FabricJS 创建画布</h2>
   <p>选择画布内的某个区域，您将获得一个突出显示的部分。</p>
   <canvas id="canvas"></canvas>
   <script>
      // 启动一个canvas实例
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

示例 2

将元素作为 HTMLElement 传递

我们不必直接将 id 传递给 FabricJS API，而是可以使用 document.getElementById() 获取元素，然后将该元素传递给 FabricJS API，如下所示 −

<!DOCTYPE html>
<html>
<head>
   <!-- 添加 FabricJS 库 -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js">
   </script>
</head>
<body>
   <h2>如何使用 FabricJS 创建画布</h2>
   <p>选择画布内的某个区域，您将获得一个突出显示的部分。</p>
   <canvas id="canvas"></canvas>
   <script>
      // 启动一个canvas实例
      var element = document.getElementById('canvas');
      var canvas = new fabric.Canvas(element);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>