Html5 và Canvas (Phần 2)
Bài đăng này đã không được cập nhật trong 8 năm
Như ở trong phần 1, chúng ta đã tìm hiểu sơ qua về Canvas về việc tạo ra những hình ảnh đơn giản như hình tròn, đường thẳng... Nếu như vậy thì chúng ta chưa thực sự thấy được điểm mạnh của Canvas, hôm nay chúng ta sẽ cùng tìm hiểu một trong điểm mạnh trong Canvas đó là tạo ra những ảnh có chuyển đông một cách linh hoạt.
Các bước để thực hiện tạo chuyển động cho hình ảnh
- Xóa các hình ảnh trước đó: trừ hình nền ra thì các đối tượng trong canvas ta cần xóa đi.
- Lưu các trạng thái: Trong từng thơi điểm thì nếu có sự thay đổi về trạng thái chung như màu nền, màu border thì để mỗi lần thay đổi hình ta cần đảm bảo các trạng thái này. Vì thế ta cần lưu trạng thái của Canvas.
- Vẽ các hình được thay đổi: Ta vẽ các đối tượng cần thay đổi.
- Khôi phục lại trạng thái: Ở đây ta phục hồi lại các trạng thái ở bước 2 để tạo ra 1 bản vẽ hoàn chỉnh.
Điều khiển các chuyển động
Đề thực hiện được các chuyển động thì các đối tượng ta cần viết 1 hàm vẽ các đối tượng. Sau đó sử dụng các vòng lặp để vẽ tuần tự các đối tượng này. Để sử dụng các vòng lặp này ta có thể sử dụng 3 hàm window.setInterval(), window.setTimeout(), và window.requestAnimationFrame(). Các hàm này sẽ tạo ra vòng lặp theo 1 khoảng thời gian nhất định.
- Hàm
window.setInterval(function, delay): là thực hiện hàmfunctioncứ sau mỗidelaygiây. Cái này chỉ dùng khi mà chúng ta không cần sự tương tác với người dùng. - Hàm
window.setTimeout(function, delay): Là sẽ thực hiệnfuncitonsau khi trôi quadelaygiây. Hàm này chủ yêu dùng khi cần tương tác với người dùng như bấm phím, click chuột. - Hàm
requestAnimationFrame(callback): Hàm này sẽ báo cho trình duyệt biết sẽ tạo ra các hình chuyển động và để trình duyệt vẽ như 1 ảnh chuyển động liên tục. Cái này sẽ tạo ra các hình ảnh chuyển động mượt, vì khi này trình duyệt tự biết sẽ sử dụng ảnh chuyển động nên tạo ra các hình ảnh này ở bộ nhớ và sau đó vẽ ra. Chính vì vậy sẽ giảm độ giật của hình ảnh. Và việc tạo các hình ảnh này thực hiện 60 lần / giây.
Dưới đây chúng ta sẽ đi với vài ví dụ.
Vẽ chuyển động mặt trời, trái đất và mặt trăng
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h3>Thực hành về Canvas</h3>
<canvas id="canvas" width="300" height="300"></canvas>
<script type="text/javascript">
var sun = new Image();
var moon = new Image();
var earth = new Image();
function init(){
sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
window.requestAnimationFrame(draw);
}
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
//Buoc 1: Xoa cac hinh ve
ctx.globalCompositeOperation = 'destination-over';
ctx.clearRect(0,0,300,300);
//Luu cac trang thai
ctx.fillStyle = 'rgba(0,0,0,0.4)';
ctx.strokeStyle = 'rgba(0,153,255,0.4)';
ctx.save();
ctx.translate(150,150);
//Ve cac doi tuong
// Trai dat
var time = new Date();
ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
ctx.translate(105,0);
ctx.fillRect(0,-12,50,24); // Shadow
ctx.drawImage(earth,-12,-12);
// Mat trang
ctx.save();
ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
ctx.translate(0,28.5);
ctx.drawImage(moon,-3.5,-3.5);
ctx.restore();
//Phuc hoi cac trang thai
ctx.restore();
ctx.beginPath();
ctx.arc(150,150,105,0,Math.PI*2,false);
ctx.stroke();
ctx.drawImage(sun,0,0,300,300);
window.requestAnimationFrame(draw);
}
init();
</script>
</body>
</html>
Các bạn có thể tham khảo tại đây
Kết luận
- Qua đây chúng ta có thể việc tạo các hình ảnh chuyển động canvas không hề khó khăn và hình ảnh chuyển động khá mượt mà.
- Nhược điểm của việc vẽ này là nếu như khối lượng object chuyển động nhiều, ta phải xóa đi rất lớn và vẽ lại toàn bộ các đối tượng. Vậy trình duyệt xử lý khá nhiều tác vụ.
Phần tiếp theo chúng ta sẽ làm ảnh chuyển động ít theo quy luật hơn. Các bạn đón chờ vào tháng tới nhé. Bài viết có tham khảo https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations
All rights reserved
