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

Bagaimana untuk membuat kanvas dengan kelas menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-08-23 21:05:04966semak imbas

Dalam artikel ini, kita akan melihat cara mencipta kanvas dengan kelas menggunakan atribut containerClass. Untuk mengakses elemen kanvas HTML asli, kami boleh menambah kelas pembalut padanya. Kelas ini membolehkan kami mengawal elemen untuk menambah interaktiviti atau penggayaan mengikut keperluan. Tatabahasa semula

new fabric.Canvas(element: HTMLElement|String, { containerClass: String}: Object)

Parameter

  • Elemen -Ini adalah elemen itu sendiri, anda boleh menggunakan Document.GetelementByid () em> elemen sendiri () Kanvas FabricJS akan dimulakan pada elemen ini.

  • Pilihan (pilihan)

    - Parameter ini ialah objek yang menyediakan penyesuaian tambahan bagi kanvas kami. Gunakan parameter ini untuk menukar warna, kursor, lebar jidar dan banyak sifat lain yang berkaitan dengan kanvas. ContainerClass adalah salah satu daripadanya, yang akan membantu kami menambah kelas pembalut pada kanvas.

    Contoh 1
Contoh kandungan berikut menunjukkan cara mencipta Kanvas menggunakan atribut

containerClass

dan kemudian periksa DOM HTML untuk melihat sama ada kelas telah ditambahkan.

<!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 a class using FabricJS?</h2>
   <p>Here we have used the containerClass property.</p>
   <canvas id="canvas"> </canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         // Name of the wrapper class to be used on the canvas
         containerClass: "className",
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>
Sekarang buka Alat Pembangun

Tab Elemen. Di sini anda akan melihat bahawa nama kelas yang kami berikan digunakan sebagai nama kelas.

Contoh 2如何使用 FabricJS 创建带有类的画布?

Mari kita lihat contoh kod yang menggunakan atribut

containerClass

untuk mencipta Kanvas dan kemudian gunakan kelas itu untuk menambah gaya CSS pada kanvas.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk membuat kanvas dengan kelas 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