Dalam tutorial ini, kami akan membuat bulatan dengan warna latar belakang menggunakan FabricJs. Bulatan adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk membuat bulatan, kita mesti mencipta contoh kelas Fabric.Circle dan menambahkannya pada kanvas. Sifat backgroundColor membolehkan kita menentukan warna untuk latar belakang objek. Ia adalah warna bekas persegi (di mana bulatan itu).
new fabric.Circle({ backgroundColor: String }: Object)
Pilihan (pilihan) - Parameter ini ialah objek< /em> menyediakan penyesuaian tambahan pada objek kami. Menggunakan parameter ini, anda boleh menukar sifat yang berkaitan dengan Bulatan seperti warna, kursor, lebar lejang dan banyak sifat lain, yang mana warna latar belakang ialah hartanya.
backgroundColor - Harta ini menerima String yang menentukan warna latar belakang objek. Nilai boleh menjadi nilai perenambelasan, nilai rgba, atau hanya nama warna yang kita mahu latar belakang.
Melepasi sifat warna latar belakang sebagai kunci dengan nilai perenambelasan
Mari kita lihat contoh memberikan nilai warna latar belakang kepada objek bulatan heksa Dalam contoh ini, kami menggunakan kod warna heks #d0db61, iaitu warna khaki gelap.
<!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> <h2>Creating a circle with a background colour using FabricJS</h2> <p>Notice the dark-khaki background around the circle. It appears as we have applied the <b>backgroundColor</b> property and assigned it a Hex color code. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var cir = new fabric.Circle({ left: 215, top: 100, radius: 50, fill: "#74c365", stroke: "#00b7eb", strokeWidth: 2, backgroundColor: "#d0db61", }); // Adding it to the canvas canvas.add(cir); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Melepasi warna latar belakang atribut sebagai kunci dengan nilai rgba
Kita boleh menggunakan RGBA (merah, biru, hijau dan alfa) dan bukannya kod warna hex Parameter alfa menentukan kelegapan warna. Dalam contoh ini, kami menggunakan nilai rgba (255,0,0,0.7), iaitu merah dengan kelegapan 0.7.
rreeeeAtas ialah kandungan terperinci Bagaimana untuk membuat bulatan dengan warna latar belakang menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!