Html5: Tìm hiểu về Canvas

Giới thiệu về Canvas

Html 5 Canvas API là một API tuyệt vời cho phép bạn tự động vẽ và hiển thị đồ họa, biểu đồ, hình ảnh và hiệu ứng.
Khái niệm Canvas lần đầu tiên được Apple đưa ra và được sử dụng trong Mac OS X Webkit để tạo nên dashboard widgets. Trước khi có canvas, bạn chỉ có thể sử dụng các API đồ họa của trình duyệt thông qua plugin như Adobe Flash, Scalable Vector Graphics (SVG), Vector Markup Language (VML) (dành riêng cho Internet Explorer), hoặc một số đoạn hack của javascript.

Chuẩn bị

Sử dụng Canvas không khó nhưng bạn cần có 1 ít kiến thức về Html và Javascript. Một số trình duyệt cũ không hỗ trợ canvas, bạn nên sử dụng Firefox 1.5 trở về sau, Opera 9 hoặc phiên bản mới hơn… Bạn có thể tham khảo thêm tại đây: http://caniuse.com/canvas

Tọa độ trong Canvas 

Canvas Coordinates

Tọa độ của canvas bắt đầu từ x=0, y=0 ở góc trên bên trái và tăng dần theo chiều ngang của trục x và chiều dọc của trục y.

Các thao tác cơ bản 

Tạo thẻ canvas:

<canvas id="tutorial" width="150" height="150"></canvas>

Mặc định, thẻ canvas chỉ có 2 phần tử: width và height. Nếu không được chỉ ra kích thước, thì kích thước mặc định là 300 px chiều rộng và 150 chiều cao.

Kiểm tra sự hỗ trợ của trình duyệt

Trong trường hợp trình duyệt không hiển thị được canvas, bạn sử dụng đoạn mã sau:

<canvas> 
Update your browser to enjoy canvas! 
</canvas>

Ngoài ra, bạn có thể chủ động kiểm tra bằng javascript:

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

Ví dụ đơn giản

Update your browser to view example!

Ví dụ trên đây vẽ 2 hình chữ nhật đơn giản. Bạn không cần tìm hiểu hết công dụng của các hàm mà cần chú ý đến 1 vài điều sau đây:

• Thẻ canvas
• Hàm draw() được gọi sau khi các phần tử DOM được tạo. Bạn có thể dùng hàm onLoad() trong thẻ body hoặc sử dụng hàm ready() của JQuery, …
• Để chọn thẻ canvas, bạn dùng cú pháp của javascript: getElementById(‘yourCanvasId’) thay vì dùng cú pháp của một số thư viện javascript khác như jquery, vì phần tử được chọn sẽ không hoạt động được với các hàm trong canvas API.

<canvas id="canvas" width="300" height="150"></canvas>
<script type="text/javascript">
    $(document).ready(function () {
        draw();
    });

    function draw() {
        var canvas = document.getElementById("canvas");        
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");

            ctx.fillStyle = "rgb(200,0,0)";
            ctx.fillRect(10, 10, 55, 50);

            ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
            ctx.fillRect(30, 30, 55, 50);
        }
    }
</script>

Tham khảo:

• Mozilla Develop Network
• Pro Html5 Programming