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
Để 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:
[sourcecode language="html"]
<!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>
[/sourcecode]
Sau khi hoàn thành (nhấp vào hình để xem kết quả hoàn chỉnh):
Chúc các bạn thành công.
No comments:
Post a Comment