语法canvas.add(object: fabric.object);
参数object - 该参数的类型为fabric.object并保存对象
示例 1：在 canvas.add() 中创建对象的实例而不是创建首先获取对象的实例，然后使用 add() 方法将其渲染到画布上，我们可以直接在 add() 方法中执行此操作。这是一个例子来说明 -
<!doctype html><html><head> <!-- adding the fabric js library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script></head><body> <div style="padding: 10px; font-weight: bold"> how to add an object to the canvas using fabricjs </div> <canvas id="canvas" width="500" height="300" style="border: 2px solid #000000"> </canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); canvas.add( new fabric.circle({ radius: 40, fill: "#9370db", top: 100, left: 100, }) ); </script></body></html>
输出
示例 2：创建一个对象，然后将其添加到画布在此示例中，我们将了解如何创建使用 fabric.triangle 类创建一个三角形对象并将其添加到画布中。
<!doctype html><html><head> <!-- adding the fabric js library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script></head><body> <div style="padding: 10px; font-weight: bold"> how to add an object to the canvas using fabricjs </div> <canvas id="canvas" width="500" height="300" style="border: 2px solid #000000"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); // creating an instance of the fabric.triangle class var triangle = new fabric.triangle({ width: 60, height: 70, fill: "#87a96b", left: 30, top:20 }); // adding it to the canvas canvas.add(triangle); </script></body></html>
输出
>
以上就是如何使用 fabricjs 将对象添加到画布？的详细内容。