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

Bagaimana untuk membuat bulatan dengan warna latar belakang menggunakan FabricJS?

WBOY
Lepaskan: 2023-08-30 16:37:09
ke hadapan
1166 orang telah melayarinya

如何使用 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)
Salin selepas log masuk

Parameter

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

  • 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>
    Salin selepas log masuk

    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.

    rreeee

    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!

sumber:tutorialspoint.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan