Canvas 动画制作的基本方法

2015/08/24 16:37:40 | 作者：HTML5学堂（码匠） | 分类：HTML5新技术 | 关键词：HTML5,Canvas,动画制作

Canvas 动画制作

在前面的两篇文章《Canvas 基本绘制（上）》《Canvas 基本绘制（下）》，介绍了Canvas的基本绘制。学过SVG的童鞋应该知道它是可以制作动画，那么Canvas是否能制作动画呢？答案是肯定的。所以今天我们就给大家来介绍一下Canvas制作动画。

简单一句话概括：不断的绘制与清除。

1、更新绘制的对象（比如位置的移动）

2、清除画布

3、在画布上重新绘制对象

context.clearRect(x,y,width,height);方法清空给定矩形内的指定像素。

所有的 2D 绘图上下文属性都是可保存和恢复的属性，但绘制的内容可不是，也就是说你恢复了绘图上下文，并不会恢复其所绘制的图形。

用来保存Canvas的状态（类似数组的入栈操作）。

用来恢复Canvas之前保存的状态（类似数组的出栈操作）。

这种状态包括：strokeStyle, fillStyle, lineWidth, lineCap, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, textBaseline。

欢迎沟通交流~HTML5学堂

<!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" class="draw"></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 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>
.wrap {
width: 1024px;
height: 800px;
margin: 0 auto;
}
.wrap canvas {
border: 1px solid #999;
}
</style>
</head>
<body>
<div class="wrap">
<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>