Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat kanvas menggunakan FabricJS?
Bagaimana untuk membuat kanvas menggunakan FabricJS?
- 王林ke hadapan
- 2023-08-22 22:01:02759semak 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('canvas');
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!