在前面的兩篇文章《Canvas 基本繪製（上）》《Canvas 基本繪製（下）》，介紹了Canvas的基本繪製。學過SVG的童鞋應該知道它是可以製作動畫，那麼Canvas是否能製作動畫呢？答案是肯定的。所以今天我們就給大家來介紹一下Canvas製作動畫。
Canvas動畫製作原理
簡單一句話概括：不斷的繪製與清除。
Canvas實現動畫步驟（不斷循環）
1、更新繪製的對象（比如位置的移動）
2、清除畫布
3、在畫布上重新繪製對象
Canvas 動畫相關命令
clearRect方法
context.clearRect(x,y,width,height);方法清空給定矩形內的指定像素。
save與restore方法
所有的 2D 繪圖上下文屬性都是可保存和恢復的屬性，但繪製的內容可不是，也就是說你恢復了繪圖上下文，並不會恢復其所繪製的圖形。
用來保存Canvas的狀態（類似數組的入棧操作）。
用來恢復Canvas之前保存的狀態（類似數組的出棧操作）。
這種狀態包括：strokeStyle, fillStyle, lineWidth, lineCap, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, textBaseline。
save與restore方法實例操作
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5學堂</title>
<link rel="stylesheet" href="../css/reset.css">
<script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
<style>
.draw {
margin: 30px 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="testCanvas" width="1000" height="500"></canvas>
<script>
var testCanvas = document.getElementById("testCanvas");
// 獲取getContext()對象
var context = testCanvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(10, 10, 150, 150);
// 保存狀態（紅色）
context.save();
context.fillStyle="green";
context.fillRect(150, 150, 170, 170);
// 保存狀態（綠色）
context.save();
// 恢復狀態（紅色）
context.restore();
context.fillRect(250, 250, 170, 170);
// 恢復狀態（綠色）
context.restore();
context.fillRect(380, 380, 170, 170);
context.beginPath();
</script>
</body>
</html>
效果圖
Canvas動畫製作實例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5學堂</title>
<link rel="stylesheet" href="../css/reset.css">
<script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
<style>
.wrap {
width: 1024px;
height: 800px;
margin: 0 auto;
}
.wrap canvas {
border: 1px solid #999;
}
</style>
</head>
<body>
<div>
<canvas width="1024" height="600">
您的瀏覽器不支持canvas！
</canvas>
</div>
<script>
var testCanvas = $("canvas")[0];
var context = testCanvas.getContext("2d");
var x = 0;
var y = 0;
var timer = null;
// 思路：進行清畫布 再次繪製（循環操作）
/*
* 功能：Canvas動畫繪製
* author：HTML5學堂、劉國利、陳能堡
*
*/
function draw(){
// 不斷改變繪製對象的水平位置
x++;
// 清除畫布
context.clearRect(0, 0, 1024, 600);
context.beginPath();
context.fillStyle = "red";
context.arc(x, 150, 100, 0, 2 * Math.PI, true);
context.closePath();
// 繪製輪廓
context.stroke();
// 填充顏色
context.fill();
}
// 設置計時器
setInterval(draw, 20);
</script>
</body>
</html>
效果圖
本文來源：HTML5學堂
想了解更多資訊，請點擊左下方的閱讀原文