24/02/2015

canvg.js – Vẽ trên Canvas dựa vào SVG

Với HTML5 thì có thêm 2 cách để vẽ đồ họa là SVG và Canvas. Canvas thì sinh ra dữ liệu dạng binary, SVG thì là dữ liệu vector. Chắc mọi người dễ dàng phân biết được cách dùng của từng loại phải không. Tuy nhiên, chắc chắn có lúc nào đó mọi người tự hỏi là có cách nào đó để vẽ lại trên Canvas dựa vào dữ liệu Vector của SVG không?
Nếu vậy thì mọi người hãy dùng thử canvg.js nhé. Đây là thư viện vẽ trên Canvas dựa vào dữ liệu SVG.

Cách sử dụng canvg.js



Bên phải là SVG, bên trái là kết quả output của canvg.js
Đây là ví dụ. Bên phải là SVG, bên trái là kết quả output của canvg.js
Tái hiện văn bản rất chuẩn.
Tái hiện văn bản rất chuẩn.
Mẫu báo cáo chi tiết như thế này mà vẫn tái hiện được.
Mẫu báo cáo chi tiết như thế này mà vẫn tái hiện được.
Có cả tô màu
Có hỗ trợ tô màu

canvg.js cũng có thể vẽ đối tượng và hỗ trợ cả ảnh động nữa nhé. Mọi người có thể ứng dụng kết hợp giữa SVG và Canvas để làm Game, hoặc tạo ra các dữ liệu mà không muốn bị chỉnh sữa...

canvg.js là chương trình viết bằng JavaScript, mã nguồn cung cấp sử dụng giấy phép MIT License.

Liên kết:
canvg.js test
gabelerner/canvg

Tags: , ,

0 nhận xét “ canvg.js – Vẽ trên Canvas dựa vào SVG ”

Đăng nhận xét

Nhận Tin

Đăng ký nhận tin

© 2015 @IT . All rights reserved.
Designed by SpicyTricks