如何用HTML5 Canvas制作子画面水果动画动物图片

来源：蜘蛛抓取(WebSpider) 时间：2017-06-16 05:23 标签： 最美的画面作文400
使用提示：
小提示：如果是HTML5 / CSS3特效请使用高级浏览器查看，如：chrome,Firefox,IE9及以上版本浏览器！
版权声明：
大头网为非营利性站点，所有资源均是网上搜集或网友上传仅供学习参考之用，请勿用于商业用途，否则产生的一切后果将由您自己承担，本站将不对任何资源负法 律责任。除部分原创作品外，本站不享有版权，如果侵犯了您的版权，请及时与我们联系admin#datouwang.com(#换成@),我们将在72小时内删除。
热门特效推荐
您可能喜欢的/Xihuan[转]利用HTML5 Canvas做在线图像处理
[问题点数：20分]
本版专家分：0
CSDN今日推荐
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：0
匿名用户不能发表回复！|
其他相关推荐还没有账号？
其他方式登录
滑动完成验证
重发验证码
手机短信验证码已发送，请查收！
您有一个400抵2000现金红包未使用！
客服热线 400-862-8862HTML5 Canvas 动画实例HTML5 Canvas 动画实例供货科技百家号在开发在线游戏时，绘制动画是非常重要的。本节介绍一个使用CanvasAPI 实现的动画实例——游戏人物的跑步动画。动画的概念及原理1．动画动画是通过一幅幅静止的，内容不同的画面（即帧）快速播放使人们在视觉上产生运动的感觉。这是利用了人类眼睛的视觉暂留原理。利用人的这种生理特性可制作出具有高度想象力和表现力的动画影片。2．原理人们在看画面时，画面会在大脑视觉神经中停留大约 1/24 秒，如果每秒更替 24 个画面或更多，那么前一个画面还没在人脑中消失之前，下一个画面进入人脑，人们就会觉得画面动起来了，它的基本原理与电影、电视一样，都是视觉原理。在计算机上要实现动画效果，除了绘图外，还需要解决下面两个问题：（1）定期绘图，也就是每隔一段时间就调用绘图函数进行绘图。动画是通过多次绘图实现的，一次绘图只能实现静态图像。可以使用setInterval方法设置一个定时器，语法如下：setInterval(函数名,时间间隔)时间间隔的单位是毫秒（ms），每经过指定的时间间隔系统都会自动调用指定的函数完成绘画。（2）清除先前绘制的所有图形。物体已经移动开来，可原来的位置上还保留先前绘制的图形，这样当然不行。解决这个问题最简单的方法是使用 clearRect(x, y,width,height)方法清除画布中指定区域的内容。图 5-13 是一个方向（一般都是 4 个方向）的跑步动作序列图。假如想获取一个姿态的位图，可利用 Canvas 的上下文 2D 对象的 drawImage(image,sourceX, sourceY, sourceWidth,sourceHeight,destX, destY, destWidth, destHeight)将源位图上某个区域（sourceX, sourceY,sourceWidth, sourceHeight）拷贝到目标区域的（destX, destY）坐标点处，显示大小为（宽destWidth, 高 destHeight）。【例 5-14】 实现从跑步动作序列 Snap1.jpg 文件中截取的第 3 个动作（帧）。 分析：在 Snap1.jpg 文件中，每个人物动作的大小为 60 像素×80 像素，所以截取源位 图的sourceX=120，sourceY=0，sourceWidth=60, sourceHeight=80 就是第 3 个动作（帧）。您的浏览器不支持 canvas。浏览例 5-14 的结果如图 5-14 所示，在页面上仅仅显示第 3 个动作。游戏人物的跑步动画【例 5-15】 实现游戏人物的跑步动画。 首先定义一个 Canvas 元素，画布的长和宽都是 300，代码如下：HTML5Canvas 实现游戏人物的跑步动画在 JavaScript 代码中定义一个 Image 对象，用于显示 Snap1.jpg。然后定义一个 init 函数，初始化 Image 对象，并设置定时器，代码如下：使用了定时器，每隔 100 毫秒就会在 Snap1.jpg 图片截取一张 60 像素×80 像素大小的 小图并绘制出来，且每次向左移 15 像素，直到最左端时重新从右侧开始，不停循环，就可 见游戏人物在屏幕上不停地奔跑。 下面分析 draw函数的实现。例 5-14 中仅仅显示人物的第三个动作，而为了实现动画 需要 clearRect(x, y,width,height)不断清除先前绘制的动作图形，再绘制后续的动作。所以 需要一个计数器 n，记录当前绘制到第几动作（帧）了。functiondraw{var canvas=document.getElementById("myCanvas"); //获取网页中的 canvas对象var ctx = canvas.getContext("2d"); //获取 canvas 对象的上下文ctx.clearRect(0,0,300,300); //清除canvas画布//从原图(60*n)位置开始截取中间一块宽 60*高 80 的区域，显示在屏幕(x,0)处ctx.drawImage(imageObj, 60*n, 0, 60, 80, x, 0, 60, 80);if(n>=8){n=0;}else{n++;}if(x>=0){x=x-30; //前移 30 像素}else{x=300; //回到右侧}}浏览例 5-15 的结果是一个游戏人物不停重复地从右侧跑到左侧的动画。本文由百家号作者上传并发布，百家号仅提供信息发布平台。文章仅代表作者个人观点，不代表百度立场。未经作者许可，不得转载。供货科技百家号最近更新：简介:这里有科技，这里有新闻作者最新文章相关文章

我要回帖

更多关于 最美的画面作文400 的文章

 

随机推荐