HTML5 Canvas API

Canvas API là một trong những bổ sung đáng giá của HTML5, giúp tăng cườngmạnh mẽ khả năng đồ họa so với các phiên bản trước. Bài viết này tập trung giới thiệu một số nét chính về Canvas API và cách sử dụng nó trong ứng dụng.

Thẻ <canvas>

HTML5 cung cấp thẻ <canvas>, thẻ này định nghĩa một khung hình chữ nhật trên trang web mà trong đó ta có thể thực hiện các thao tác vẽ hình bằng JavaScript. <canvas> có các thuộc tính width và height để xác định kích thước vùng vẽ hình. Mặc định, vùng này có kích thước 300 x 150 (px). Ví dụ sau đây minh họa cách khai báo một canvas trong trang HTML5:

<canvas id=”myCanvas” style=”border: 1px solid;” width=”300″ height=”300″>

Trình duyệt của bạn không hỗ trợ Canvas!

</canvas>

Đoạn mã trên khai báo một vùng chữ nhật kích thước 300 x 300, thuộc tính id là cần thiết để tương tác với vùng này bằng script, và như mọi thẻ HTML khác, ta cũng có thể định dạng canvas bằng CSS: thuộc tính border tạo một đường viền mỏng bao quanh. Cuối cùng, thẻ <canvas> cho phép xác định đoạn text sẽ được hiển thị khi browser không hỗ trợ. Một điều may mắn là phần lớn các trình duyệt phổ biến ngày nay (trừ IE8) đều tương thích rất tốt, và IE9 cũng đang hứa hẹn khả năng này. Hi vọng rằng đây sẽ không phải là vấn đề quá lo lắng cho các lập trình viên!

Vẽ hình trên Canvas

Sau khi đã thiết lập xong một khu vực dành riêng để sáng tạo bằng thẻ <canvas>, chúng ta có thể bắt đầu đi vào công việc chính. Về nguyên tắc, vẽ hình trên canvas gồm ba bước:

1. Lấy về context của canvas cần điều khiển
2. Thực hiện các thao tác vẽ
3. Áp dụng các thao tác này cho context

Lưu ý rằng ta cần phải chính thức áp dụng các thao tác vẽ trên context để chúng có hiệu lực (điều này tương tự như khi bạn thay đổi các thiết lập trong một hộp thoại, các thiết lập mới sẽ chưa được áp dụng cho đến khi bạn nhấn OK hoặc Apply). Đoạn code sau cho thấy cách vẽ một đường thẳng với Canvas API:

<script>
   1:

   2: function drawLine()

   3: {

   4: // Lấy về context của canvas cần vẽ

   5: var canvas = document.getElementById(‘myCanvas’);

   6: var context = canvas.getContext(’2d’);

   7: // Vẽ đường thẳng

   8: context.beginPath();

   9: context.moveTo(100, 200);

  10: context.lineTo(200, 100);

  11: // apply kết quả cho canvas

  12: context.stroke();

  13: }

  14: window.addEventListener(“load”, drawLine, true);
</script>

Có lẽ không cần giải thích gì thêm về đoạn code trên, ngoại trừ một điểm đáng chú ý: phương thức getContext của đối tượng canvas nhận vào một tham số xác định context muốn lấy về. Hiện tại, “2d” là giá trị hợp lệ duy nhất. Tuy nhiên rất có thể 3D context sẽ được bổ sung vào một ngày không xa (một số phiên bản thử nghiệm của Opera và plugin cho FireFox đã hỗ trợ context này). Bên cạnh đó, HTML5 Canvas API cũng cung cấp nhiều phương thức để tùy biến nét vẽ và tô màu:

// thay đổi dộ dày nét vẽ

context.lineWidth = 3;

// đổi màu nét vẽ sang màu đỏ

context.strokeStyle = ‘#FF0000′;

// đổi màu tô

context.fillStyle = ‘#0000FF’;

// vẽ hình chữ nhật được tô kín

context.fillRect(10, 10, 40, 60);

Ngoài ra, ta cũng có thể vẽ một ảnh trực tiếp trong canvas:

// load ảnh

var img = new Image();

img.src = “image.jpg”;

// vẽ ảnh khi đã load xong

img.onload = function () {

context.drawImage(img, 10, 10, 60, 60);

}

Một rắc rối nảy sinh khi làm việc với các file ảnh là cần phải đảm bảo chúng được load xong trước khi sử dụng. Trong thực tế, các trình duyệt thường load ảnh theo kiểu bất đồng bộ và điều này có thể gây ra vấn đề. Để giải quyết, đoạn code trên sử dụng sự kiện onload của đối tượng Image, sự kiện này chỉ phát sinh một khi quá trình load đã hoàn tất. Nhờ đó mà đoạn code trên sẽ đạt được hiệu quả mong muốn.

Canvas API trong HTML5 còn rất nhiều những tính năng hấp dẫn: scale , transform, tạo hiệu ứng đổ bóng, animation… Công bằng mà nói thì đây cũng là một đề tài lớn và phức tạp. Trong khuôn khổ giới hạn, bài viết chỉ trình bày những gì cơ bản nhất, hi vọng rằng có thể mang lại một chút hứng thú cho bạn đọc, để từ đó các bạn sẽ tự mình khám phá sâu hơn!

Nguồn WormTech