Bagaimana untuk membuat kanvas menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membuat kanvas menggunakan FabricJS?

王林

Lepaskan： 2023-08-22 22:01:02

ke hadapan

782 orang telah melayarinya

Bagaimana untuk membuat kanvas menggunakan FabricJS?

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)

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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