Menggunakan skrip, elemen canvas digunakan untuk mencipta grafik dengan serta-merta (biasanya JavaScript). Teg ini baru sahaja diperkenalkan dalam HTML5.
Elemen<canvas id="canvas name"></canvas>
Ini ialah contoh HTML mudah untuk menerangkan penggunaan kanvas -
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="290" height="80" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Georgia";
ctx.strokeText("TUTORIALSPOINT",10,50);
</script>
</body>
</html>
Berikut ialah beberapa perpustakaan kanvas percuma yang boleh anda gunakan untuk menambahkan kesan yang betul pada tapak web anda -
D3.js ialah salah satu pilihan paling popular apabila ia datang untuk menggambarkan sebarang jenis data. Gunakan kuasa SVG, Kanvas dan HTML standard untuk menghasilkan grafik dan carta yang menakjubkan. Perpustakaan tidak meletakkan banyak sekatan tentang cara menyediakan pengguna dengan akses kepada data.
Pakej Particles.js sesuai apabila mereka bentuk sistem zarah berasaskan kanvas. Tiada kebergantungan dan ia ringan. Ia akan mengambil masa kira-kira 30 minit untuk membiasakan diri dengan semua ciri perpustakaan.
Enjin JavaScript untuk fizik badan tegar 2D dipanggil perpustakaan Matter-js. Ia boleh digunakan untuk mensimulasikan sistem fizikal asas pada kanvas. Ia mempunyai banyak modul yang boleh digunakan untuk melaksanakan pelbagai tugas.
Ia ialah rangka kerja penskripan grafik vektor sumber terbuka yang dijalankan pada Kanvas HTML5.
Paper.js menyediakan model objek dokumen yang memudahkan untuk mencipta dan mengisi item yang mengandungi lapisan, kumpulan, laluan dan banyak lagi. Buat laluan dan tambahkan segmen padanya. Laluan ialah satu siri segmen garisan yang disambungkan oleh lengkung.
Setelah ditambah, segmen ini boleh diperiksa, dimanipulasi dan dipindahkan dengan mudah. Anda juga boleh memadamkan klip dengan mudah. Dapatkan juga kaedah untuk mengimport dan mengeksport grafik vektor ke SV.
Dengan Paper.js, pustaka JavaScript sumber terbuka, anda boleh menggunakan kanvas untuk menjana kesan visual yang menakjubkan. Anda boleh memilih untuk menggunakan PaperScript, yang merupakan versi pustaka proprietari JavaScript.
Fabric.js ialah perpustakaan kanvas HTML5 JavaScript yang berkuasa digunakan secara meluas untuk menyediakan model objek interaktif di atas elemen kanvas.
Gunakan Fabric.js untuk mencipta dan mengisi objek pada kanvas, iaitu objek seperti bentuk geometri ringkas. Selain itu, mudah untuk memberikan bentuk kecerunan. Tambahkan teks dengan mudah dan manipulasi penjajaran, saiz dan banyak lagi secara dinamik.
Ia ialah perpustakaan JavaScript sumber terbuka yang boleh menggambarkan data anda dalam 8 cara berbeza. Ia mempunyai prestasi pemaparan yang sangat baik dalam semua pelayar moden. Lukis semula gambar rajah dengan mudah apabila mengubah saiz tetingkap untuk kebutiran berkadar yang sempurna.
Chart.js menyediakan carta terbina dalam dan boleh dikembangkan dengan mudah dengan carta tersuai. Carta terbina dalam termasuk carta garis, carta bar, carta bar mendatar, carta serakan, carta gelembung, dsb.
p5.js ialah perpustakaan JavaScript percuma yang menyediakan fungsi lukisan sepenuhnya sebagai sebahagian daripada pengekodan kreatif. Ia memudahkan proses mencipta visual interaktif dalam pelayar web.
Pustaka sumber terbuka ini untuk memasukkan warna, titik, garisan dan bentuk lain pada kanvas. Ia juga menyediakan gelung for untuk melukis pelbagai bentuk.
Terdapat perpustakaan lain seperti EaselJS, heatmap.js, JavaScript Infovis Toolkit, Konva.js, Phaser, Pts.js, Rekapi, Scrawl-Canvas dan rangka kerja ZIM, dsb., yang merupakan sumber terbuka tetapi tidak disokong Melalui tag kanvas dalam html.
Atas ialah kandungan terperinci Apakah perpustakaan Kanvas percuma dalam HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
