Rough.js tạo đồ họa vẽ tay bằng Canvas & SVG

Thật tuyệt vời khi thấy web đã đi được bao xa yếu tố năng động nhu la SVG trên trình duyệt. Bạn có thể thiết kế mọi thứ từ hình ảnh động tùy chỉnh đến Trò chơi HTML5 với các thư viện phù hợp.

Một trong những thư viện mới nhất đáng để thử nghiệm là Rough.js. nó là một kịch bản tạo đồ họa miễn phí hiện đang trong giai đoạn thử nghiệm hoạt động trên các phần tử canvas và SVG.

Bạn có thể xây dựng các biểu tượng tùy chỉnh, biểu đồ thanh, hầu hết mọi thứ bạn muốn trong mã. Và, kết quả cuối cùng mang một cảm giác vẽ tay tuyệt đẹp.

Khi viết bài này, Rough.js vẫn đang ở phiên bản beta v0.1, vì vậy nó có thể không sẵn sàng cho một trang web sản xuất trực tiếp. Nhưng đó là một bằng chứng rằng tiêu chuẩn web đang tiến triển nhanh và chúng ta đang bước vào thời đại mà loại công cụ này có thể.

Lấy ví dụ này thanh tiến trình được tạo thông qua Rough.js. Nếu bạn nhấp vào “Khởi đầu” nút bạn sẽ nhận thấy nó chạy một hình ảnh động tùy chỉnh cái đó thực sự trông vẽ tay. Nó đang sử dụng Các dòng SVG với các mẫu được xác định trước để tạo ra một hiệu ứng lung lay trông thật tự nhiên.

Trên trang GitHub chính, bạn sẽ tìm thấy một danh sách phần nhiều ví dụ về Rough.js đang hoạt động.

Tất cả những thứ ở đây đi kèm với các mẫu mã và nên khá dễ dàng để làm lại cho bất kỳ trang web. Tất cả những gì bạn cần là tệp tập lệnh Rough.js và một chút kiên nhẫn để xử lý JavaScript.

Đây là một đoạn trích mẫu thể hiện như thế nào tạo một hình chữ nhật trong mã:

 var raw = new RoughCanvas (document.getEuityById ('myCanvas'), 400, 200); thô.r hình chữ nhật (10, 10, 200, 200); // x, y, chiều rộng, chiều cao 

Khá đơn giản một khi bạn hiểu mã nhưng có lẽ không phải là kịch bản trực quan nhất cho người mới bắt đầu.

Nếu bạn muốn có nhiều đoạn mã và bản demo mẫu xem trang chủ của Rough.js. Đây là nơi hoàn hảo để bắt đầu học và tìm đoạn mã bạn có thể làm lại.

Ngoài ra, nếu bạn có câu hỏi hoặc đề xuất cho các tính năng bổ sung, bạn có thể nhắn tin cho người tạo Rough.js trên Twitter @preetster.