HTML5开发 页游/手游动画及游戏系列教程(Game Tutorial):（二）基本动画（canvas先生很忙）
我们这里又一次要请出我们的主角canvas先生 了，canvas先生含有这个drawImage技能，我们的动画就全靠它施展魔法了。
drawImage()
此方法比较复杂，可以有3个、5个或9个参数
3个参数：最基本的 drawImage使用方法。一个参数指定图像位置，另两个参数设置图像在 canvas中的位置。
这里我们使用一下第一个方法，代码如
<script type="text/javascript"> function DrawAnimate(){ canvas = document.getElementById("view"); context = canvas.getContext("2d"); var image = new Image(); image.src = "./adog.gif"; image.onload = function(){ context.drawImage(image,50,50);//显示在canvas的(50,50)坐标处。 } } </script>adog.gif 图片的大小为432*90, 因为制作的时候4张图片是等大小的，所以每小张图片的宽为432/4=108，高为90
结果如下：
这是一张有好几帧的png图片，我们这边首先全部显示。接下来需要裁剪，使得产生动画的效果。
5个参数：中级的 drawImage 使用方法，包括上面所述3个参数，加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。
我们把图片变大吧，修改上面关键代码为：
context.drawImage(image,50,50,600,700);
//显示在canvas的(50,50)坐标处，并且目标长度变为600，目标宽度700.故意把图片拉伸的离谱些。呵呵。看上去明显些嘛，缩小的方法同理，改变下大小就行。
9个参数：最复杂 drawImage 的使用方法，包含上述5个参数外，另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。
我们来只显示第一帧图片吧，高喊道~~~~小二，上关键代码一份，帐算大爷头上，哈哈：
context.drawImage(image,0,0,108,90,50,50,108,90);
然后我要实现动画效果，就是做个循环，一帧一帧的显示，来欺骗我们的眼睛，以为是会动的。
还是献上代码，其实原理和第一节介绍的大致相同，都是设置延时循环显示，不明白可以参考上节(点击打开链接)：
setInterval( function put(){ (nCurFrame == 108*4)?(nCurFrame = 0):(null); context.clearRect(0,0,canvas.clientWidth,canvas.clientHeight); context.drawImage(image,nCurFrame,0,108,90,50,50,108,90); nCurFrame+=108; },180);看到了吧。动画的效果就出来了，我非常喜欢玩的街霸的”ado盖”,如果有时间我还想自己做个街霸的系列，虽然已经有人做出来了，但是自己重新做的感觉是不一样的，我觉得游戏和音乐都是种艺术，非常棒。。写到这里，好像最近的韩国神曲<江南style>唱的比较火，非常搞笑，建议大家去看看。呵呵。偏题了。
还有一种方法是，图片不是一整张拼接起来的怎么办，如下面的几张，这个其实更方便，只要改变Image的src路径就行了（这里不再做演示了）
。
接下来的教程，我打算不从基础开始了，我们需要站在巨人的肩膀上，这个巨人就是cocos2d x/cocos2d-html5引擎,我们不需要重复发明轮子，因为这样效率很低。