Thứ năm, ngày 8 tháng 12 năm 2016

HTML5 – Canvas 2D cơ bản

Ngày đăng: 9/4/2012, 8:21:12PM | Lượt xem: 2,415
Hot!

Mộ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.

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

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.