หากคุณต้องการเพิ่มองค์ประกอบแบบอินเทอร์แอกทีฟให้กับเว็บไซต์ของคุณ ไลบรารีฟรีสำหรับ Canvas จะช่วยให้งานของคุณง่ายขึ้น อันดับแรก เรามาพูดถึงวิธีสร้างแคนวาสใน HTML5 กัน
แท็ก HTML
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้ ซึ่งสร้างแคนวาสใน HTML5
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id = "myCanvas"> </canvas>
<script>
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#7cce2b';
ctx.fillRect(0,0,300,100);
</script>
</body>
</html> ตอนนี้ ให้เราดูว่าไลบรารี่ฟรีใดสำหรับ Canvas ใน HTML5 ที่จะช่วยเพิ่มเอฟเฟกต์ที่น่าทึ่งให้กับเว็บไซต์ของคุณได้
Fabric.js
Fabric.js เป็นไลบรารีแคนวาส JavaScript HTML5 อันทรงพลัง ใช้กันอย่างแพร่หลายเพื่อจัดเตรียมโมเดลออบเจกต์แบบโต้ตอบที่ด้านบนขององค์ประกอบแคนวาส
การใช้ Fabric.js สร้างและเติมวัตถุบนผืนผ้าใบ เช่น วัตถุ เช่น รูปทรงเรขาคณิตอย่างง่าย นอกจากนี้ยังง่ายต่อการให้การไล่ระดับสีกับรูปร่าง เพิ่มข้อความได้อย่างง่ายดายและปรับเปลี่ยนการจัดตำแหน่ง ขนาด ฯลฯ
Paper.js
เป็นเฟรมเวิร์กสคริปต์กราฟิกแบบเวกเตอร์โอเพนซอร์ส ซึ่งทำงานบนผ้าใบ HTML5
Paper.js มี Document Object Model สร้างและเติมโปรเจ็กต์ด้วยเลเยอร์ กลุ่ม เส้นทาง ฯลฯ ได้อย่างง่ายดาย สร้างพาธและเพิ่มเซ็กเมนต์ให้กับพวกมัน เส้นทางคือลำดับของส่วนที่เชื่อมต่อกันด้วยเส้นโค้ง
ส่วนต่างๆ สามารถตรวจสอบ จัดการ และเคลื่อนย้ายได้อย่างง่ายดายหลังจากเพิ่ม คุณยังสามารถลบเซ็กเมนต์ออกได้อย่างง่ายดาย รับวิธีการนำเข้าและส่งออกกราฟิกแบบเวกเตอร์เป็น SV ด้วย
Chart.js
เป็นไลบรารี JavaScript แบบโอเพ่นซอร์ส ซึ่งแสดงภาพข้อมูลของคุณใน 8 วิธีที่แตกต่างกัน มันมีประสิทธิภาพการเรนเดอร์ที่ยอดเยี่ยมในเบราว์เซอร์ที่ทันสมัยทั้งหมด วาดแผนภูมิใหม่ได้อย่างง่ายดายเมื่อปรับขนาดหน้าต่างเพื่อความละเอียดของมาตราส่วนที่สมบูรณ์แบบ
Chart.js มีแผนภูมิในตัว และสามารถขยายไปยังแผนภูมิที่กำหนดเองได้อย่างง่ายดาย แผนภูมิในตัวประกอบด้วยเส้น แท่ง แถบแนวนอน กระจาย ฟองอากาศ ฯลฯ
