Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat kanvas dengan Bulatan menggunakan FabricJS?

Bagaimana untuk membuat kanvas dengan Bulatan menggunakan FabricJS?

WBOYke hadapan: 2023-09-09 23:05:031231semak imbas

如何使用 FabricJS 创建带有 Circle 的画布？

Dalam tutorial ini, kita akan belajar cara mencipta kanvas dengan objek Bulatan 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.

Syntax

new fabric.Circle({ radius: Number }: Object)

Parameter

#🎜#🎜 pilihan (pilihan #🎜#🎜) # - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kepada objek kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan bulatan dengan atribut radius.
kunci pilihan

Nombor untuk menentukan jejari bulatan. Jika kita tidak menentukan jejari, bulatan tidak akan muncul pada kanvas. Contoh 1
Buat contoh Fabric.Circle() dan tambahkannya pada kanvas kami #🎜 🎜🎜#

#80daeb

<!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 canvas with circle using FabricJS</h2>
         <p>Here we have created a circle of radius 50px over a canvas. In addition, we have used the <b>fill</b> and <b>stroke</b> properties to color its body and outline. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         
         // Creating an instance of the fabric.Circle class
         var circle = new fabric.Circle({
            left: 215,
            top: 100,
            radius: 50,
            fill: "#80daeb",
            stroke: "#00b7eb",
            strokeWidth: 2,
         });
         
         // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Contoh 2Gunakan kaedah set untuk mengendalikan objek Bulatan #🎜🎜🎜🎜🎜🎜🎜 ini contoh, Kami menggunakan kaedah set yang merupakan penetap nilai. Sebarang sifat yang berkaitan dengan lejang, lebar lejang, jejari, skala, putaran, dsb. boleh ditukar menggunakan kaedah ini.

<!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 canvas with circle using FabricJS</h2>
      <p>Here we have used the <b>set</b> method to create a circle of radius 40px and then filled the object with a color. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle();
         canvas.add(circle);
         
         // Use set to set the properties
         circle.set("radius", 40);
         circle.set("fill", "green");
         circle.set({
            stroke: "rgba(133, 187, 101, 0.7)",
            strokeWidth: 4
         });
         circle.set("left", 50);
         circle.set("top", 50);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk membuat kanvas dengan Bulatan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

number 对象 fabric

Kenyataan：

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

Artikel sebelumnya：Semakan jenis statik dalam JavaScript menggunakan TypeScriptArtikel seterusnya：Semakan jenis statik dalam JavaScript menggunakan TypeScript

Artikel berkaitan

Lihat lagi