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

Bagaimana untuk membuat kanvas menggunakan FabricJS?

王林ke hadapan: 2023-08-22 22:01:02800semak imbas

Dalam artikel ini, kami akan mencipta kanvas menggunakan FabricJS, tetapi sebelum itu, mari kita faham apa itu kanvas. Untuk melukis grafik pada halaman web, kami mempunyai API Web yang dipanggil API Kanvas. API ini sesuai untuk melukis bentuk asas, tetapi menjadi sangat sukar untuk menambah interaksi atau melukis bentuk kompleks. Oleh itu, FabricJS muncul, sebuah perpustakaan yang dibina di atas API Kanvas. Untuk menggunakan FabricJS, perkara pertama yang anda perlu lakukan ialah mencipta kanvas FabricJS.

Syntax

new fabric.Canvas(element: HTMLElement|String, options: Object)

Parameter

elemen − Parameter ini ialah elemen itu sendiri, anda boleh menggunakan Element ;kanvas> id elemen itu sendiri datang Dapatkan. Kanvas FabricJS akan dimulakan pada elemen ini.
pilihan (pilihan) − Parameter ini ialah objek yang menyediakan penyesuaian tambahan bagi kanvas. Menggunakan parameter ini, kita boleh menukar sifat kanvas yang berbeza seperti warna, kursor, lebar sempadan, dll.

Contoh 1

Meluluskan id sebagai rentetan

Mari kita lihat contoh kod mencipta kanvas menggunakan FabricJS. Memandangkan FabricJS berfungsi di atas API Kanvas, kami akan mencipta elemen HTML menggunakan teg

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the FabricJS library -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js">
   </script>
</head>
<body>
   <h2>How to create a canvas using FabricJS</h2>
   <p>Select an area inside the canvas and you will get a highlighted section.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a Canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Contoh 2

Melepasi elemen sebagai HTMLElement

Daripada menghantar id terus ke FabricJS API dan kemudian menghantar elemen itu ke FabricJS API, kita boleh mendapatkan elemen menggunakan BdocuIment. −

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the FabricJS library -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js">
   </script>
</head>
<body>
   <h2>How to create a canvas using FabricJS</h2>
   <p>Select an area inside the canvas and you will get a highlighted section.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a Canvas instance
      var element = document.getElementById(&#39;canvas&#39;);
      var canvas = new fabric.Canvas(element);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

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

html 字符串对象 canvas

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk membandingkan dua objek tatasusunan JavaScript menggunakan jQuery/JavaScript?Artikel seterusnya：Bagaimana untuk membandingkan dua objek tatasusunan JavaScript menggunakan jQuery/JavaScript?

Artikel berkaitan

Lihat lagi