HTML5 – Canvas 2D cơ bản

HTML 5 - Canvas - Hello worldMột trong những nguyên nhân chính khiến nhiều người nhận định rằng HTML5 sẽ đem đến “cái chết từ từ” cho Flash, Silverlight và các công nghệ tương tự là sự ra đời của thẻ Canvas. Thông qua các API trong javascript, bạn có thể vẽ ra màn hình bất kì thứ gì và xử lý hoạt động của nó. Kết hợp với các thao tác của người dùng, bạn có thể tạo được các ứng dụng thuần HTML+javascript với hiệu ứng không thua kém Flash.

Trình duyệt hỗ trợ

Nguồn: http://caniuse.com/#feat=canvas

IE

Firefox

Chrome

Safari

Opera

3 versions back 7.0 13.0 3.2 11.0
2 versions back 8.0 14.0 4.0 11.1
Previous version 9.0 15.0 5.0 11.5
Current 9.0 10.0 16.0 5.1 11.6
Near future 10.0 11.0 17.0 6.0 12.0
Farther future 12.0 18.0

Sử dụng

Để sử dụng, bạn cần thêm một thẻ canvas vào trong tài liệu HTML tương tự như các thẻ thông thường:

<canvas id="mycanvas" width="300" height="300">
This text may not appear.
</canvas>

Đa số các trình duyệt sẽ bỏ qua các nội dung mà bạn chèn vào trong thẻ này.  Tuy nhiên trong IE9, các nội dung này vẫn được hiển thị. Nhiệm vụ của thẻ này là để các mã lệnh javascript  vẽ lên đó thông qua một đối tượng context được trả về từ phương thức canvas.getContext(id). Để lấy về context 2d từ một đối tượng canvas trong javascript, ta làm như sau:

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // draw something
} else {
  alert("This browser doesn't support canvas."
}

Note: Hiện tại các trình duyệt chỉ mới hỗ trợ loại context 2d (context 3d cũng được hỗ trợ nhưng chưa hoàn chỉnh).

Một canvas có thể được coi như một lưới với số pixel được xác định bởi width và height. Tọa độ trong canvas có gốc nằm ở góc trên trái:

HTML 5 - Canvas - Coordinate

Tham khảo các phương thức của canvas 2D

Một trang rất quen thuộc để tham khảo các API này là w3schools. Trang web này liệt kê chi tiết các phương thức cùng với một công cụ cho phép chạy thử trực tuyến các ví dụ:

http://www.w3schools.com/html5/html5_ref_canvas.asp

Ví dụ đơn giản

Ví dụ sau sẽ vẽ ra canvas hai hình chữ nhật chồng lên nhau cùng với dòng chữ “Hello World!” và một hình ảnh bên dưới. Kích thước và tọa độ của chúng sẽ thay đổi phụ thuộc vào canvas.

<html>
<head>
<script>
	function draw() {
		var canvas = document.getElementById("canvas");
		if (canvas.getContext) {
			var ctx = canvas.getContext("2d");

			ctx.fillStyle = "Cyan";
			ctx.fillRect(10,10,canvas.width-20,canvas.height-20);

			ctx.font = "36px Arial";
			ctx.fillStyle = "rgb(150,150,250)";
			ctx.fillRect(20,20,canvas.width-40,canvas.height-40);
			ctx.fillStyle = "white";
			ctx.fillText ("Hello World!",50,canvas.height/3);

			// draw image
			var img = new Image();

			img.onload = function(){
				ctx.drawImage(img, (canvas.width-120)/2, canvas.height/3+10,120,120);
			};
			img.src = "html5.png";
		}
	}

	window.onload=draw;
</script>
</head>
<body>
   <canvas id="canvas" width="300" height="250" style="border:1px solid gray"></canvas>
</body>
</html>

Kết quả:
HTML 5 - Canvas - Hello world
YinYang’s Programming Blog

Advertisements

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 Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s