HTML 5: Đơn Giản Và Nhanh Chóng Với jCanvas


Web ngày nay càng lúc càng nhanh và mạnh hơn trước kia. Thêm vào đó, HTML 5 ra đời đã mang đến nhiều khả năng phát triển các web application mang tính tương tác cao hơn mà không dùng flash. Thay vào đó, tất cả người dùng cần để chạy tốt chỉ là trình duyệt, và họ sẽ có thể thưởng thức những gì tốt nhất mà website mang đến.


Tuy nhiên, việc tạo ra một nội dung mang tính tương tác không bao giờ đơn giản, và nó cũng không ngoại trừ yếu tố chính làm nên HTML 5: canvas. Nếu bạn đã thực hiện những gì trình duyệt khuyến khích, bạn sẽ cảm nhận được sự tăng tốc của GPU và cảm giác canvas chạy tốt hơn. Có vài framework có khả năng tạo canvas dễ hơn phát triển nó, đặc biệt là jQuery. Nhưng jQuery lại yêu cầu code khá nhiều. Đây là bài viết cải thiện điều đó.

Về jCanvas

 

jCanvas là một plugin jQuery được viết bằng JavaScript để làm việc với jQuery, và nó có nghĩa là nó sẽ dễ dùng hơn rất nhiều trong HTML5. Những nhà lập trình web sẽ cảm nhận được lợi ích từ việc sử dụng jCanvas. Bằng việc sử dụng jCanvas, bạn sẽ ít phải code hơn, vì plugin này sẽ làm việc và dịch tất cả các code cần để jQuery chạy.

Ví dụ


jCanvas có thể vẽ một số lớn các object. Ví dụ, bạn có thể thấy một vòng eclipse được đổ màu. Có nhiều parameter mà bạn có thể set và giữ code nguyên bản ít nhất có thể. Trong ví dụ này, các parametter gradient được set đầu tiên (distances, colors,…) cùng với việc vẽ hình eclipse. Đối với các lập trình viên, việc này sẽ giúp ích rất nhiều để viết code mà không cần khai báo cú pháp.

Trong ví dụ này, một hình jpg thông thường được đảo một nữa. Trong hàm đầu tiên (hoặc tập hợp một instruction) thiết lập việc đảo hình, trong khi đó hàm thứ hai vẽ hình và load hàm đảo vào. Khi code chạy, bạn sẽ có một nửa hình được đảo.

Trong ví dụ cuối cùng, những hình vẽ khác nhau được vẽ bởi những hàm khác nhau được cung cấp bởi jCanvas. Màu xanh, với hình chữ nhật chưa được đổ màu bởi một hàm đơn giản. Bạn luôn có thể tuỳ chỉnh hình chữ nhật của bạn, ngay cả với parameter để chọn width của stroke và radius của góc. Hình năm cạnh được vẽ ỏởi nhiều hàm generic mà được chọn để vẽ các đường gấp khúc thông thường. Bạn cũng có thể chọn những parameter giống nhau để thưc hiện những hàm khác nhau.

Sự khác biệt rất quan trọng vì bạn có thể vẽ một mặt tròn bằng cả các hàm hình chữ nhật và đường gấp khúc, nhưng bạn có thể chỉ vẽ hình chữ nhất với hàm hình chữ nhật. (Mặt phẳng có thể là hình chữ nhật, nhưng hình chữ nhật chưa chắc là mặt phẳng !)

Thông tin khác

Có rất nhiều thứ bạn có thể làm với mỗi hàm, thêm vào đó là có rất nhiều hàm để bạn sử dụng! Bạn có thể download jCanvas tại đây (http://calebevans.me/projects/jcanvas/download.html). Nếu bạn cần giúp đỡ, bạn có thể xem tài liệu tại đây (http://calebevans.me/projects/jcanvas/docs.html#syntax). Nếu vẫn không giúp ích, bạn có thể liên lạc với các lập trình viên jCanvas ở đây(http://calebevans.me/projects/jcanvas/support.html). Nếu bạn muốn thử jCanvas trước khi đưa vào dùng, các lập trình viên đã tạo một trang rất tuyệt là Sandbox để bạn có thể thử trước khi quyết định dùng.

Cuối cùng, nếu bạn muốn giúp đóng góp với mã nguồn mở, bạn sẽ được chào đón tại đây(https://github.com/caleb531/jcanvas). jCanvas luôn luôn được cải tiến và phiên bản mới sẽ được cập nhật vào vài tuần tới.

Lời kết

jCanvas là một công cụ tuyệt vời giúp đơn giản hơn trong việc lập trình, đặc biệt là nếu bạn có rất nhiều canvas cần dùng. Một lần nữa, vài tính năng chính là:

– Vẽ hình, đường thẳng, hình ảnh, và text.

– Chỉnh sửa màu sắc, gradients, patterns, và shadows.

– Tính toán các canvas (rotate, scale….)

– Một lượng lớn các option bạn có thể cần

Nguồn: makeuseof.com

Advertisements

Về haipro912
Đời rất dở nhưng anh vẫn phải niềm nở =))

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s

%d bloggers like this: