上一篇，主要讲了canvas提供的基本的image api；
本篇我们使用canvas提供的Image Api及变换，来实现一些实例：小车的简单运动、简单游戏地图、图像的平移缩放；
以下应用中使用到的图片：
| 图片1：tanks--[32*32]*8--tanks.png | 图片2：map--[32*32]*4--map.png |
|
@@##@@ 立即学习“前端免费学习笔记（深入）”； |
@@##@@ 立即学习“前端免费学习笔记（深入）”； |
我们在Canvas上(50,50)的位置上显示tanks的前1/8部分(第一个tank)，如何做呢？我们用part of image api;
context.drawImage(tanks,0,0,32,32,50,50,32,32);
如果要使当前的tank旋转90度如何实现呢？
Canvas中旋转操作不管是针对shape、text还是image都是一样的；
首先，要把canvas的current state压入堆栈：context.save();
然后启动变换：context.setTransform(1,0,0,1,0,0);
我们要以tank自身为中心旋转90度，所以，要把原点平移到tank的中心；
tank的位置(x,y)是(50,50),大小size(w,h)是(32,32);所以它的中心点为(x+w/2,y+h/2);
平移原点：context.translate(50 + 16, 50 + 16);
旋转：context.rotate(90*Math.PI/180);
且记：本来是要在canvas的(50,50)位置绘制图片，平移原点后，该位置坐标就变成(-16,-16);
绘制图片：context.drawImage(tanks, 0, 0, 32, 32, -16, -16, 32, 32);
v1.8新增功能简介： 一、后台新增生成网站地图和生成Sitemap.xml的功能。 二、新增下载中心功能，可在后台上传doc,xls,ppt,rar,pdf文件。 三、新增产品缩略图自动缩放功能，图片按比例缩放，解决了图片变形问题。 四、新闻、产品详细页新增了上一个、下一个的功能，改善用户体验。 五、在线客服新增了阿里巴巴贸易通在线客服。 六、可在后台设置分享代码，如百度分享和AddThis等。
图片旋转---完整代码Images
轮子转动动画
tanks一共有8个tank，每个图大小为(32,32);
如果我们要在(50,50)的位置上显示第2个tank，如果做呢？
第2个：context.drawImage(tanks, 32*(2-1), 0, 32, 32, -16, -16, 32, 32);
第3个：context.drawImage(tanks, 32*(3-1), 0, 32, 32, -16, -16, 32, 32);
依次类推，第8个：context.drawImage(tanks, 32*(8-1), 0, 32, 32, -16, -16, 32, 32);
每个tank图片的不同之处，就在于其轮子部位，如果我们用定时器100ms来轮流显示这1到8个tank图片，就会看到一个tank轮子转动动画；
tank轮子转动动画--完整代码Images
tank的水平移动效果实现起来就易如反掌啦，只要每次改变每一帧动画中，tank图片的显示的x位置就ok；
fcuntion drawScreen(){x=x+1;…………} 大家运行，看看效果！！！
我们定义一个320*320大小的Canvas，用图片map来绘制一个简单的游戏地图；
图片map共有四副小图，均是32*32：主背景、障碍、顶部底部砖块、左边右边砖块；
首先，我们把Canvas划分成10*10的小格子，每一个小格子的大小分别是32*32，刚好跟图片大小相同；
然后我们来定义一个二维数组来存放每一个小格子所要显示的图片的索引；
再用一个二层循环绘制图片，地图出来了；
先看看效果图：
简单的游戏地图--完整代码Images
再分享一个Image Api的应用：
图像的平移缩放Pan
该代码中，有一个图片"pan.jpg"，大家随便找一个比较大的图就可以；
快运行，看看效果吧！
