動畫是由多幅連續的圖片組成，按順序切換不同的圖片給人一種動畫的感覺，切換的速度越快動畫的感覺越真實，當速度達到1秒24幅圖片的時候，人的肉眼就無法分辨了，這就是所說的24幀。canvas中的動畫其實就是循環執行擦除和繪製的操作，並且一般會在操作之前保存環境，操作之後恢復環境。
使用canvas製作動畫由兩個關鍵點：循環執行，繪製每次顯示的圖片。循環執行主要有兩種方式，一種是使用前面所學過的setInterval或者setTimeout方法；另一種是調用新增加的專門用於動畫的requestAnimationFrame方法，這個方法不需要設置間隔時間，直接將處理邏輯寫入參數的回調函數中就可以了。但是requeseAnimationFram自身需要被放到回調函數中，另外，它的啓動操作可以用cancelAnimationFrame方法來取消。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id='c2d'>瀏覽器不支持canvas</canvas>
<script>
const canvas = document.getElementById('c2d');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
function draw(){
var date = new Date();
h = date.getHours();
m = date.getMinutes();
s = date.getSeconds();
dot = s % 2 ? " ": ":";
var dateStr = h + dot + m + dot + s;
ctx.save();
ctx.clearRect(0,0,300,300);
ctx.fillStyle="red";
ctx.font = "37px Times New Roman";
ctx.fillText(dateStr, 30,50);
ctx.restore();
window.requestAnimationFrame(draw);
}
draw();
}
</script>
</body>
</html>
