如何使用 FabricJS 将对象添加到画布?
fabricjsjavascripthtml5 canvas
在本文中，我们将介绍如何使用 add 方法将对象添加到画布。创建画布后，我们可以用 FabricJS 中可用的各种对象填充它，例如 fabric.Circle、fabric.Ellipse 或 fabric.Line 等。
语法
canvas.add(object: fabric.Object);
参数
object −此参数的类型为 fabric.Object，包含我们要添加到画布中的对象。
示例 1
在 canvas.add() 中创建对象实例
我们不必先创建对象实例，然后使用 add() 方法将其渲染到画布上，而是可以直接在 add() 方法中执行此操作。下面是一个例子来说明 −
<html>
<head>
<!-- 添加 Fabric JS 库-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>如何在 Fabric.js 中向画布添加对象</h2>
<p>在这里您将获得一个圆圈作为画布上的对象</p>
<canvas id="canvas"></canvas>
<script>
// 启动一个canvas实例
var canvas = new fabric.Canvas("canvas");
canvas.add(new fabric.Circle({
radius: 40,
fill: "#9370db",
top: 100,
left: 100,
}));
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
示例 2
创建一个对象，然后将其添加到画布
在此示例中，我们将看到如何使用 fabric.Triangle 类创建一个三角形对象并将其添加到画布。
<!DOCTYPE html>
<html>
<head>
<!-- 添加 Fabric JS 库-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>如何在 Fabric.js 中向画布添加对象</h2>
<p>在这里，您将获得一个三角形作为画布上的对象</p>
<canvas id="canvas"></canvas>
<script>
// 启动一个canvas实例
var canvas = new fabric.Canvas("canvas");
// 创建 fabric.Triangle 类的实例
var triangle = new fabric.Triangle({
width: 60,
height: 70,
fill: "#87a96b",
left: 30,
top: 20
});
// 将其添加到画布
canvas.add(triangle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
