หากต้องการเพิ่มองค์ประกอบโต้ตอบในเว็บ ไลบรารี Canvas ฟรีช่วยลดงานได้มาก ก่อนอื่น เรื่องพื้นฐาน Canvas:
สร้าง Canvas พื้นฐาน
<!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>
ไลบรารีแนะนำ
Fabric.js
ไลบรารี Canvas อันทรงพลัง ให้ object model โต้ตอบบน canvas สร้าง/จัดการรูปทรงเรขาคณิต ให้ gradient เพิ่มข้อความ จัด alignment, size แบบไดนามิก
Paper.js
Vector graphics scripting framework โอเพนซอร์ส รันบน HTML5 Canvas ให้ Document Object Model สร้าง layers, groups, paths, segments คลองโค้ง Import/export SVG ได้
Chart.js
JavaScript library โอเพนซอร์ส วาดกราฟ 8 รูปแบบ ประสิทธิภาพดีทุกเบราว์เซอร์ รองรับ responsive resize มี built-in charts: line, bar, scatter, bubble, radar, polarArea, pie, doughnut ขยายเป็น custom charts ได้
เลือกตามความต้องการ: Fabric.js สำหรับ object manipulation, Paper.js สำหรับ vector graphics, Chart.js สำหรับการแสดงข้อมูลเป็นกราฟ
