HTML5 – Xây dựng hình ảnh động đơn giản thông qua đối tượng canvas


Một tiện ích thú vị nhất của HTML5 là hỗ trợ vẽ các đối tượng 2D. Chúng ta có thể vẽ hình tròn, hình chữ nhật, đoạn thẳng, một tấm hình, text, … lên trang web thông qua các phương thức được hỗ trợ sẵn trong Canvas API của HTML5. Nâng cao hơn nữa, xây dựng một giao diện hoạt hình lên web.

Hôm nay, chúng ta sẽ tìm hiểu một ví dụ đơn giản nhất để có được một hình ảnh động.

Vẽ nhiều đối tượng lên một canvas
1

Để tạo được hoạt hình, chúng ta phải vẽ lại các đối tượng ở các vị trí khác nhau và lặp đi lặp lại việc vẽ này thông qua hàm setInterval trong Javascript.

Các bước thực hiện:

  • Tạo đối tượng canvas trong tài liệu để vẽ các hình.
  • Tạo hàm draw() để vẽ các đối tượng (mỗi lần vẽ một hình là một trạng thái -> thiết lập một biến có giá trị thay đổi để gán cho vị trí thay đổi).
  • Cứ mỗi 30/1000 giây sẽ gọi lại hàm draw() một lần để vẽ lại hình ảnh.

Code tham khảo:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Animation</title>

<style>
#mySwimmerCanvas{
	/*Hiển thị border của canvas*/
	border: 2px solid #FF0000
}
</style>

<script>
var positionX = 0;
var positionY = 0;
// Gọi lại hàm draw sau mỗi thời gian 30/1000 giây
setInterval(draw, 30);

//Hàm vẽ người
function draw(){
   var centerX = 200; // tọa độ x cho tâm của hình tròn thể hiện cái đầu
   var centerY = 50; // tọa độ y cho tâm của hình tròn thể hiện cái đầu
   var radius = 20;
   // thay đổi tọa độ x, y để thiết lập chuyển động hoạt hình
   if (positionX < 30) { positionX += 1; positionY += 1; } else { positionX = 0; positionY = 0; } // khai báo để vẽ các đối tượng 2d lên canvas var canvasSwimmer = document.getElementById("mySwimmerCanvas"); var contextSwimmer = canvasSwimmer.getContext("2d"); //xóa vị trí cũ để vẽ vị trí mới contextSwimmer.clearRect(0,0,400,400); //bắt đầu vẽ contextSwimmer.beginPath(); /*Vẽ đầu (hình tròn) centerX, centerY: tâm đường tròn radius: kích thước bán kính false: vẽ theo chiều kim đồng hồ */ contextSwimmer.arc(centerX, centerY+positionY, radius, 0, 2 * Math.PI, false); contextSwimmer.fillStyle = "#000000"; contextSwimmer.fill(); /* vẽ thân (đoạn thẳng) vẽ nhiều đối tượng lên một canvas -> mỗi đối tượng phải gọi beginPath() lại 
	*/
	contextSwimmer.beginPath(); 
	contextSwimmer.moveTo(200,70+positionY); // điểm thứ nhất để vẽ
	contextSwimmer.lineTo(200,175); // điểm thứ hai để vẽ
	contextSwimmer.lineWidth = 10; // độ rộng đoạn thẳng
	contextSwimmer.strokeStyle = "#000000";  // màu đoạn thẳng
	contextSwimmer.lineCap = "round"; // bo tròn hai đầu đoạn thẳng
	contextSwimmer.stroke(); // vẽ đoạn thẳng
	
	// vẽ cánh tay bên phải (đoạn thẳng)
	contextSwimmer.beginPath();
	contextSwimmer.moveTo(200, 100);
	contextSwimmer.lineTo(175-positionX,140-positionY);
	contextSwimmer.lineWidth = 10;
	contextSwimmer.strokeStyle = "#000000"; 
	contextSwimmer.lineCap = "round";
	contextSwimmer.stroke();
	
	// vẽ cánh tay bên trái (đoạn thẳng)
	contextSwimmer.beginPath();
	contextSwimmer.moveTo(200, 100);
	contextSwimmer.lineTo(225+positionX,140-positionY);
	contextSwimmer.lineWidth = 10;
	contextSwimmer.strokeStyle = "#000000"; 
	contextSwimmer.lineCap = "round";
	contextSwimmer.stroke();
	
	// vẽ chân bên phải (đoạn thẳng)
	contextSwimmer.beginPath();
	contextSwimmer.moveTo(200, 175);
	contextSwimmer.lineTo(190-positionX,250-positionY);
	contextSwimmer.lineWidth = 10;
	contextSwimmer.strokeStyle = "#000000"; 
	contextSwimmer.lineCap = "round";
	contextSwimmer.stroke();


   // vẽ chân bên trái (đoạn thẳng)
	contextSwimmer.beginPath();
	contextSwimmer.moveTo(200, 175);
	contextSwimmer.lineTo(210+positionX,250-positionY);
	contextSwimmer.lineWidth = 10;
	contextSwimmer.strokeStyle = "#000000"; 
	contextSwimmer.lineCap = "round";
	contextSwimmer.stroke();

}
</script>
</head>

<body onload="draw();">
<canvas id="mySwimmerCanvas" width="400" height="400" >
</canvas>
</body>
</html>

Sau khi hoàn thành (nhấp vào hình để xem kết quả hoàn chỉnh):
animation
Chúc các bạn thành công.

Advertisements

Phản hồ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 Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s