Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencipta kanvas dengan elips menggunakan FabricJS?

Bagaimana untuk mencipta kanvas dengan elips menggunakan FabricJS?

WBOYke hadapan: 2023-09-12 23:05:021346semak imbas

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

Dalam tutorial ini, kita akan belajar cara mencipta kanvas dengan objek Ellipse menggunakan FabricJS. Bujur adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta elips, kami akan mencipta contoh kelas Fabric.Ellipse dan menambahkannya pada kanvas.

Syntax

new fabric.Ellipse({ rx: Number, ry: Number }: Object)

Parameter

#🎜#🎜🎜🎜#🎜🎜🎜 🎜# (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada elips kami. Gunakan parameter ini untuk menukar warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan objek elips, dengan rx dan ry ialah sifat objek elips. kunci pilihan

nombor , yang menentukan jejari mendatar elips. Jika kita tidak menentukan jejari mendatar, elips tidak akan muncul pada kanvas. ry
##🎜🎜🎜🎜🎜 #
, yang menentukan jejari menegak elips. Jika kita tidak menentukan jejari menegak, elips tidak akan muncul pada kanvas. Contoh 1Buat contoh Fabric.Ellipse() dan tambahkannya pada kanvas kami #🎜## 🎜🎜#Mari kita lihat contoh cara menambah elips pada kanvas. Di sini kita mencipta objek dengan jejari mendatar 80 piksel dan jejari menegak 50 piksel. Kami menggunakan biru langit untuk mengisi objek dengan nilai heksadesimal

.

<!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>How to create a canvas with an ellipse using FabricJS?</h2>
      <p>Here we have created an ellipse object and set it over a canvas.</p>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         
         // Initiate an Ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 100,
            fill: "#87ceeb",
            rx: 80,
            ry: 50,
         });
         
         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Contoh 2

Gunakan kaedah yang ditetapkan untuk mengendalikan objek Ellipse

#🎜 dalam contoh ini, kita gunakan🎜 #🎜 🎜#set kaedah, yang merupakan penetapan 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>How to create a canvas with an ellipse using FabricJS?</h2>
      <p>Here we have used the <b>set</b> method to create an ellipse object over the canvas. </p>
      <canvas id="canvas"></canvas>
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         
         // Initiate an Ellipse instance
         var ellipse = new fabric.Ellipse();
         
         // Using set to set the properties
         ellipse.set("rx", 90);
         ellipse.set("ry", 40);
         ellipse.set("fill", "#1e90ff");
         ellipse.set({
            stroke: "rgba(245,199,246,0.5)",
            strokeWidth: 6
         });
         ellipse.set("left", 150);
         ellipse.set("top", 90);
         
         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

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

对象 li fabric

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk mengimport fail SVG dalam JavaScript?Artikel seterusnya：Bagaimana untuk mengimport fail SVG dalam JavaScript?

Artikel berkaitan

Lihat lagi