日期:2014-05-17  浏览次数:20702 次

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个参数,加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。