Dalam artikel ini, kami akan menggunakan kaedah add untuk menambah objek pada kanvas. Selepas mencipta kanvas, kita boleh mengisinya dengan pelbagai objek yang terdapat dalam FabricJS, seperti fabrik.Bulatan, fabrik.Elips atau fabrik.Garisan, dsb. Sintaks
sebaliknya Penciptaan mula-mula mendapat contoh objek dan kemudian memaparkannya ke kanvas menggunakan kaedahcanvas.add(object: fabric.Object);
Contoh 2: Cipta objek dan kemudian tambahkannya pada kanvas
<!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>output
Atas ialah kandungan terperinci Bagaimana untuk menambah objek ke kanvas menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
