同学们好，这节课我们继续学习Html5 canvas画布的基础知识，本节的重点和难点是掌握在canvas画布中加载绘制图片的方法，尤其是drawImage()方法的三个参数、五个参数和九个参数的意义和用法，并且本节还介绍了canvas制作侧身走循环动画的制作原理。准备好了吗，我们开讲了！
拓展：
Html5侧身走小动画用纯CSS3动画和精灵图技术也能快速实现，同学们可参照下列方法试一试：
素材图：
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3+精灵图技术实现侧身走动画</title>
<style type="text/css">
.man{
background: url('images/walkman.png');
width: 127px; /*盒子的宽度刚好是单个小人的宽高*/
height: 307px;
background-size: 889px 307px;/*侧身走素材图的总宽高，889=127*7，即7个小人横排精灵图*/
-webkit-animation: demo 2s steps(7) infinite; /*steps（7）表示设置7次循环执行动画demo*/
}
@-webkit-keyframes demo{
0%{ background-position: 0 0 }
100%{ background-position: -889px 0} /*设置背景图的位置从0 到-889px*/
/*从背景图位置0开始，每次后挪-127px，背景换后一小人的行走姿态，换7次直到-889px，再重来*/
}
</style>
</head>
<body>
<div class="box">
<div class="man"></div>
</div>
</body>
</html>
