HTML5 – Canvas: Di chuyển đối tượng bằng bàn phím

preferences-desktop-keyboard-shortcutsBàn phím là thiết bị không thể thiếu và là phương tiện rất quan trọng để thực hiện các chức năng của các ứng dụng tương tác với người dùng. Trong bài viết này, tôi sẽ hướng dẫn cách bắt sự kiện bàn phím trong canvas và dùng nó để điều khiển góc xoay và hướng di chuyển của đối tượng đồ họa.

Xem Demo.

Đọc tiếp

HTML5 – Canvas 2D: Hiệu ứng bóng chuyển động và phản xạ – part 2

HTML5 - Canvas - Bouncing ball 2Tiếp theo phần trước, tôi sẽ thêm các chướng ngại vật hình chữ nhật vào canvas để tạo đường di chuyển của trái bóng. Các chướng ngại vật được tôi lấy từ bài: HTML5 – Chọn và di chuyển đối tượng trên Canvas.

Xem Demo.

Đọc tiếp

HTML5 – Canvas 2D: Hiệu ứng bóng chuyển động và phản xạ – part 1

HTML5 - Canvas 2D - Simple Bouncing ballMột ví dụ đơn giản để khi làm quen với đồ họa và chuyển động trong lập trình là viết một ví dụ bóng nảy bên trong một vùng cửa sổ (canvas). Một quả bóng sẽ được vẽ bên trong canvas và chuyển động theo một hướng xác định. Khi chạm bất kì thành tường nào, bóng sẽ đổi hướng chuyển động tùy theo hướng di chuyển.

Xem Demo.

Đọc tiếp

CSS3 – Tạo Collapsible Menu với selector :target

jQuery - Auto Collapsible Navigation Menu:target là một selector mới của CSS3 với mục đích chọn lựa đối tượng dựa vào id của nó và được xác định dựa vào chuỗi URI. Selector này được sử dụng kết hợp với các thẻ <a> với thuộc tính href chỉ đến id của thẻ cần chỉ đến. Tính năng này giúp bạn có thể thiết kế các giao diện tương tác mà không cần dùng đến mã javascript.

Đọc tiếp

HTML5 – Chọn và di chuyển đối tượng trên Canvas

vector_shape_mouseThay vì lưu trữ nội dung của Canvas dưới dạng ImageData, ta có thể lưu trữ các đối tượng đồ họa dưới dạng cấu trúc dữ liệu và thực hiện vẽ từng phần tử lên Canvas. Với phương pháp này, tôi sẽ minh họa bằng một ví dụ  sử dụng chuột để chọn và di chuyển các hình vẽ trên Canvas.

Xem Demo.

Đọc tiếp

HTML5 – Vẽ hình bằng chuột trong Canvas

drawing_penTrong bài viết này, tôi sẽ giới thiệu cách bắt và xử lý các thao tác chuột trên Canvas để thực hiện một ứng dụng vẽ hình đơn giản. Bên cạnh đó, bạn có thể biết được cách để lưu và phục hồi lại dữ liệu của canvas khi cần thiết. Các ví dụ trong bài khá đơn giản nên tôi sẽ không đi vào giải thích chi tiết.

Xem demo.

Đọc tiếp

ASP.NET – Serialize đối tượng .NET thành JSON và ngược lại

Javascript-JSON-SerializerCác dữ liệu JSON được sử dụng rất thường xuyên trong ứng dụng web, đặc biệt khi cần truyền dữ liệu thông qua ajax. Trong ASP.NET, bạn có thể sử dụng class JavaScriptSerializer để chuyển đối một đối tượng .NET (hay CLR) bất kì thành một chuỗi JSON và ngược lại. Đồng thời, bạn có thể tạo ra các JavaScriptConverter để quy định cách thức chuyển đổi của JavaScriptSerializer.

Đọc tiếp

Css3Test – Kiểm tra mức độ hỗ trợ CSS3 của trình duyệt

CSS3 hứa hẹn đem đến nhiều tính năng và tiêu chuẩn mới cho công nghệ thiết kế web sau này. Tuy nhiên, hiện nay vẫn chưa có trình duyệt nào hỗ trợ đầy đủ các tính năng của phiên bản CSS này. Một trang web rất hữu ích mà bạn có thể dùng để kiểm tra chính xác mọi tính năng của CSS3 mà trình duyệt hỗ trợ hay không là css3test.com.

Đọc tiếp

CSS3 – Media Query và Responsive Web Design

screen - style - desginTính năng Media Query của CSS3 dự định sẽ mang lại một “kỉ nguyên” mới của kĩ thuật thiết kế web mới trong năm 2012. Nhờ tính năng, các trang web sẽ hiển thị linh hoạt hơn trên các loại thiết bị, độ phân giải màn hình, kích thước trình duyệt khác nhau mà không cần phải sử dụng bất kì mã xử lý javascript nào. Kĩ thuật thiết kế này được gọi là Responsive Web Design và được ứng dụng rất phổ biến trên thế giới.

Đọc tiếp