Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat bulatan dengan warna latar belakang menggunakan FabricJS?

Bagaimana untuk membuat bulatan dengan warna latar belakang menggunakan FabricJS?

WBOYke hadapan: 2023-08-30 16:37:091098semak imbas

如何使用 FabricJS 创建一个带有背景颜色的圆形？

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).

Syntax

new fabric.Circle({ backgroundColor: String }: Object)

Parameter

Pilihan (pilihan) - Parameter ini ialah objek 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.

Option Key

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.

Contoh 1

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>

Contoh 2

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.

Atas 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!

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menukar bentuk kawasan teks menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk menukar bentuk kawasan teks menggunakan JavaScript?

Artikel berkaitan

Lihat lagi