Nếu cần thêm các yếu tố tương tác vào website, các thư viện Canvas miễn phí có thể giúp ích rất lớn. Trước hết, hãy xem cách tạo canvas trong HTML5.
Thẻ HTML <canvas> dùng để vẽ đồ họa, hoạt ảnh, v.v. bằng scripting. Thẻ <canvas> được giới thiệu trong HTML5.
Ví dụ tạo Canvas cơ bản
<!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>
Dưới đây là các thư viện Canvas miễn phí phổ biến cho HTML5:
Fabric.js
Fabric.js là thư viện JavaScript HTML5 canvas mạnh mẽ, phổ biến để cung cấp mô hình đối tượng tương tác trên phần tử canvas. Với Fabric.js, bạn tạo và điền các đối tượng lên canvas như hình học đơn giản. Dễ dàng cho hình dạng gradient, thêm văn bản và thao tác động căn chỉnh, kích thước, v.v.
Paper.js
Paper.js là framework scripting đồ họa vector mã nguồn mở, chạy trên HTML5 Canvas. Nó cung cấp Mô hình Đối tượng Tài liệu, dễ dàng tạo và điền dự án với layers (lớp), groups (nhóm), paths (đường dẫn), v.v. Tạo paths và thêm segments (đoạn). Paths là chuỗi các segments được nối bằng cong线. Các segments có thể kiểm tra, thao tác, di chuyển dễ dàng sau khi thêm. Cũng có phương thức import/export đồ họa vector dạng SVG.
Chart.js
Chart.js là thư viện JavaScript mã nguồn mở, trực quan hóa dữ liệu theo 8 cách khác nhau. Hiệu năng render tốt trên tất cả trình duyệt hiện đại. Dễ dàng vẽ lại biểu đồ khi resize cửa sổ để có độ chính xác hoàn hảo. Chart.js cung cấp biểu đồ tích hợp sẵn và dễ dàng mở rộng thành biểu đồ tùy chỉnh. Biểu đồ tích hợp: line, bar, horizontal bar, scatter, bubble, v.v.