Fabric.js

Fabric.js 是一个开源的 JavaScript 画布库，提供了在画布元素之上构建的交互式对象模型。它还是一个SVG到画布与画布到SVG的解析器。它是由Juriy Zaytsev创建的，于2010年首次推出。

默认情况下， Fabric.js 提供了基于对象的绘图功能，除了动画、缩放和变形功能外。

Fabric.js

Fabric.js的特点

它为所有的图形提供了一个框架。我们可以调整和旋转所有的图形，并且可以定制框架的大小。
这允许我们将多个图形分组为一个。
Fabric.js支持触摸，因此在Fabric.js上创建的应用程序可以在移动浏览器上平稳运行。
Fabric.js通过快速序列化，可以将画布数据转换为JSON格式。

学习Fabric.js的原因

Fabric.js是使用HTML5画布的最简单方法。Fabric.js还在画布元素之上提供了一个交互式对象模型。使用Fabric.js，我们可以创建和填充对象。Fabric.js可以使用鼠标指针自由移动和操作画布上的对象。

安装

有两种安装Fabric.js的方法：

方法1（使用NPM安装）： 要安装Fabric.js，我们只需要运行以下命令，然后在HTML文件中导航所需的文件。

npm install fabric --save

方法2（使用Yarn安装）： 安装Fabric.js，我们只需要运行下面的命令，之后我们需要在我们的HTML文件中导航到所需的文件。

yarn add fabric

方法3 (使用CDN链接): 我们可以简单地在HTML文件的头部插入以下链接来启用Fabric.js。

<script src=”https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js”></script>

示例: 在这个示例中，我们将使用Fabric.js设置画布的背景色。

<!DOCTYPE html> 
<html> 
<head> 
    <!-- Adding the FabricJS library -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> 
    </script> 
</head> 
  
<body> 
    <div style="text-align: center; width: 500px;"> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <b> 
            Fabric.js Example 
        </b> 
    </div> 
  
    <canvas id="canvas" width="500" height="300"
        style="border:1px solid #000000"> 
    </canvas> 
  
    <script> 
  
        // Initiate a Canvas instance 
        var canvas = new fabric.Canvas("canvas", { 
                  
            // Set the background color 
            // of the Canvas 
            backgroundColor: "cyan" 
        }); 
    </script> 
</body> 
</html>

输出：

Fabric.js