header-object

[Webapp Tutorial] Xây dựng ứng dụng di động dùng HTML5 - Bài 6

 

6.1 Vài điểm sơ lược HTML5

 

  • Hỗ trợ thêm tập hợp các thẻ (tag) mới liên quan đến việc định cấu trúc trang (Semantic Elements) một cách tốt hơn như <nav>, <section>, <menu>, <article>…
  • Các thành phần mới trong form: kiểu dữ liệu mới, thuộc tính mới, khả năng tự kiểm nhận (validation) dữ liệu không cần đến javascript.
  • Loại bỏ sự phiền phức của các Flash-Plugin bằng việc hỗ trợ các thẻ chơi multimedia gồm <video> và <audio>
  • Hỗ trợ mạnh mẽ hơn về khả năng xử lý đồ họa khi thêm vào các thành phần: <canvas>, SVG, sử dụng CSS3 2D, 3D.
  • Hỗ trợ mạnh mẽ cho việc tạo ra các Web-Application: Truy xuất các tập tin cục bộ, lưu trữ dữ liệu cục bộ, hỗ trợ cơ sở dữ liệu SQL cục bộ,  Cache, tăng cường Javascript và XHTMLHTTPRequest.
  • Hỗ trợ đầy đủ CSS3.

 

6.2 Xử lý vẽ lên Canvas

6.2.1 Vẽ đường

Đầu tiên, mỗi canvas khi được đặt lên trang đi kèm với một hệ trục tọa độ của riêng nó. Hệ trục tọa độ này có các đặc điểm sau:

  • Gốc tọa độ ở góc trên, trái của thẻ <canvas>
  • Trục Ox nằm ngang, hướng từ trái sang phải
  • Trục Oy nằm dọc, hướng từ trên xuống dưới
  • Một đơn vị trên trục có độ dài 1pixel

Các bạn có thể tham khảo hình sau để dễ hình dung
h13 Để vẽ bất kì đối tượng nào, chúng ta cần có đối tượng context có được bằng cách thực hiện như sau:

var context = document.getElementById("sample1").getContext("2d");

Đối tượng này sau đó phải được thiết lập màu vẽ, kiểu nét vẽ và độ rộng đường viền dạng như sau:

context.strokeStyle 	= "#df4b26";
context.lineJoin 		= "round";
context.lineWidth 		= 5;

Sau đó, để vẽ một đoạn thẳng từ vị trí (x1, y1) tới vị trí (x2,y2) trên canvas, chúng ta sẽ thực hiện lần lượt như sau:

context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.closePath();
context.stroke();

 

6.2.2 Vẽ chữ nhật

Có nhiều cách khác nhau để vẽ một hình chữ nhật trên canvas. Sau đây là một vài cách phổ biến:
Cách 1: Sử dụng kiến thức như vẽ đường ở trên, thay vì dùng phương thức lineTo() chúng ta sẽ dùng phương thức rect(). Code để vẽ hình chữ nhật có góc trên trái tọa độ (x1, y1), chiều ngang dài w và chiều cao h như sau:

//màu nền là màu xanh lá cây
context.fillStyle = "green";
context.beginPath();
context.rect(x1, y1, w, h);
content.closePath();
//tô màu nền của path
context.fill()
   

Cách 2: Chúng ta sử dụng ngay phương thức fillRect() để vẽ ngay hình chữ nhật như sau:

//màu nền là màu xanh lá cây
context.fillStyle = "green";
//vẽ hình chữ nhật
context.fillRect(x1, y1, w, h);

 

6.2.3 Vẽ Elip

Không giống  như vẽ một đường hoặc một hình chữ nhật, việc vẽ một elip trên canvas của html5 phức tạp hơn một chút.
Giả sử chúng ta cần vẽ một hình Elip có tâm tại điểm có tọa độ (10,10). Độ dài bán trục lớn là 30 và độ dài bán trục nhỏ là 10, có hình chữ nhật cơ sở là C1C2C3C4 như trong hình minh họa sau:
h14 
Chúng ta không có phương thức nào có thể vẽ ngay ra một hình elip như đã vẽ ra một hình chữ nhật. Tuy nhiên chúng ta có thể vẽ lần lượt 2 cung tròn (béizer curve). Cung tròn thứ nhất là nửa A1C1C2A2 và cung tròn thứ 2 là nửa còn lại A2C3C4A1.
Đoạn code thực hiện điều này đơn giản như sau:

context.beginPath();
context.moveTo(10,20); // A1
//vẽ cung tròn thứ nhất
context.bezierCurveTo(
  40,20, 	// C1
  40,0, 	// C2
  10,0); 	// A2
//vẽ cung tròn thứ hai
context.bezierCurveTo(
  -20,0, 	// C3
  -20,20, 	// C4
  10,20); 	// A1
//màu nền xanh lá cây
context.fillStyle = "green";
context.closePath();
context.fill();	

Một điều các bạn cũng cần chú ý là việc vẽ đường, hay hình chữ nhật, hay hình elip thì chúng ta luôn phải chú ý đến điểm đầu (bắt đầu vẽ) và điểm cuối (dừng vẽ).
Để biết khi nào người dùng bắt đầu vẽ chúng ta sẽ bắt sự kiện người dùng chạm vào canvas (mousedown). Để biết khi nào người dùng vẽ xong một đối tượng chúng ta bắt sự kiện thôi chạm vào canvas (mouseup).
Việc bắt sự kiện chạn chuột (hay chạm ngón tay) chúng ta sẽ sử dụng JQuery Mobile giống như chúng ta đã bắt sự kiện người dùng chọn (click) vào cây bút hay kiểu vẽ đã thực hiện ở bài trước.

Đào Ngọc Giang

Thêm ý kiến


Security code
Làm mới


2

Facebook

Thống kê truy cập

Hiện có 794 khách đang truy cập
2491955