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>唱的比较火,非常搞笑,建议大家去看看。呵呵。偏题了。

还有一种方法是,图片不是一整张拼接起来的怎么办,如下面的几张,这个其实更方便,只要改变Imagesrc路径就行了(这里不再做演示了)

接下来的教程,我打算不从基础开始了,我们需要站在巨人的肩膀上,这个巨人就是cocos2d x/cocos2d-html5引擎,我们不需要重复发明轮子,因为这样效率很低。

=============================================================================================

QQ:61357455

核武器

本文出自"核武器基地的专栏"博客,转载请务必保留此出处


  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值