canvas实现动画效果,js canvas 动画

　　最近学了html5，涉及到关键元素canvas- canvas，在网上下载了一些游戏源代码。虽然我能理解，但是单独针对某个功能还是很难提取出来，所以我在网上搜了一些例子，实现了超级玛丽的简单动画。设计中涉及到的主要的drawImage()函数

　　(1)drawImage(image，x，y)这种方法是最基本的操作方法，具体来说就是指在指定的坐标轴上，以左上角为(0，0)原点，绘制出你整个要操作的图像对象，从而计算出你想要它描绘的位置。

　　(2) DrawImage (image，x，y，width，height)这种方法是指对需要操作的图像对象进行缩放，然后在画板上进行绘制。宽度和高度是您希望绘制图片后的大小。

　　(3) DrawImage (image，sourcex，sourcey，sourcewidth，sourceheight，destx，desty，destwidth，destheight)这是最复杂的方式，但也是相当有用的。就是在你要操作的图像对象中，选择你要定位的左上角位置(sourceX，sourceY)，然后截取你要的宽度和高度(sourceWidth，sourceHeight)，将截取的图像绘制到画板的相应位置(destX，destY)和相应范围(destWidth，destHeight)。

　　1.首先我上网找了一张超级玛丽连贯行走的图片(如下图)。

　　2.创建一个新的html5文件，命名为mario.html在这里，定义画布元素，开始动画按钮和停止动画按钮。

　　3.相关js功能

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。