📅 最后修改于: 2023-12-03 15:08:18.545000 🧑 作者: Mango
Fabric.js 是一个 JavaScript 库，可以用于创建基于 HTML5 canvas 的交互式图像应用程序。它提供了很多基本的形状（如矩形、圆形、三角形等）和工具（如缩放、旋转、裁剪等），可以大大简化开发者的工作。
在本文中，我们将介绍如何使用 Fabric.js 创建一个矩形画布，以及如何将一些简单的形状添加到这个画布中。
首先，我们需要在 HTML 页面中引入 Fabric.js 库。可以从官方网站（https://fabricjs.com/）下载最新版本，或者使用 CDN（如 https://cdnjs.com/libraries/fabric.js）。
<!DOCTYPE html>
<html>
<head>
<title>My Fabric.js Canvas</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
</head>
<body>
<!-- 这里将在下一步中添加代码 -->
</body>
</html>
接下来，我们需要创建一个 Fabric.js 的 Canvas 对象，并将其添加到 HTML 页面中。
const canvas = new fabric.Canvas("canvas");
document.body.appendChild(canvas.getElement());
在上面的代码中，我们首先创建了一个名为 canvas 的对象，然后调用了 getElement() 方法，将这个对象添加到了 HTML 页面中。注意，这个方法返回的实际上是一个 HTML5 canvas 元素，因此我们需要使用 appendChild() 方法将它添加到页面中。
现在，我们可以调用 fabric.Rect 构造函数创建一个矩形对象，并将其添加到 Canvas 中。
const rect = new fabric.Rect({
left: 100,
top: 100,
width: 200,
height: 100,
fill: "red",
});
canvas.add(rect);
在上面的代码中，我们首先创建了一个名为 rect 的矩形对象，设置了它的一些属性（如位置、大小、颜色等），然后调用了 add() 方法将它添加到 Canvas 中。
我们可以使用 canvas.toDataURL() 方法将 Canvas 中的图形保存为图片。
const link = document.createElement("a");
link.download = "my-canvas.png";
link.href = canvas.toDataURL({
format: "png",
});
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
在上面的代码中，我们首先创建了一个 a 标签，设置了它的 download 和 href 属性，然后将它添加到页面中。接着，我们调用了 click() 方法模拟用户点击下载链接的行为，最后将这个链接从页面中移除。需要注意的是，toDataURL() 方法的参数可以指定输出的图片格式（如 png、jpeg 等）。
通过以上步骤，我们成功创建了一个矩形画布，并将一个矩形添加到其中。Fabric.js 提供了很多其他的形状和工具，可以帮助开发者更方便地实现自己的图像应用程序。如果您想深入了解 Fabric.js 的更多功能，请访问官方文档（https://fabricjs.com/docs/）。