- 浏览: 585252 次
- 来自: ...
文章分类
最新评论
-
lgh1992314:
相同的元素呢
一种离散化方法 -
HelloSummerR:
圆心的位置是随机的,于是圆的部分会落到canvas外,那样就显 ...
HTML5 Canvas学习笔记(1)处理鼠标事件 -
hlstudio:
好久没见到sokuban了,这有个java版的,带源码,可以参 ...
求推箱子的最小步数(java) -
肖泽文:
太好了,谢谢你。。有中文注释!
HTML5 推箱子游戏过关演示动画 -
swm8023:
删除操作,将最后一个叶子节点插入后也有可能上浮吧
彻底弄懂最大堆的四种操作(图解+程序)(JAVA)
两张精灵表图片:
这里可以看效果:
http://www.108js.com/article/article3/view/30161/an.html
下载源代码:http://www.108js.com/article/article3/30161.html
这里可以看效果:
http://www.108js.com/article/article3/view/30161/an.html
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>精灵表动画实例</title> <style type="text/css"> #draw-target { width:480px; height:320px; background-color:#ccf; position:relative; border:1px solid; } </style> <script type="text/javascript"> function CanvasSprite(params) { this.x=params.x;//精灵在画布中的x坐标 this.y=params.y; this.index=params.index;//精灵图片的索引,从左到右,从0开始 this.ctx = params.ctx;//画布的上下文,绘图的地方 this.width = params.width;//精灵图片的宽 this.height = params.height; this.imagesWidth = params.imagesWidth;//精灵表的宽 //精灵在精灵表中的位置 this.vOffset = Math.floor(this.index*this.width / this.imagesWidth) * this.height; this.hOffset = (this.index*this.width) % this.imagesWidth; this.hide = false; this.img = new Image(); this.img.src = params.images;//精灵表图片 this.act=params.act;//精灵的动作行为 } //在画布中绘制精灵 CanvasSprite.prototype.draw=function() { if (this.hide) { return; } this.ctx.drawImage(this.img, this.hOffset, this.vOffset, this.width, this.height,this.x , this.y, this.width, this.height); } //改变精灵的索引 CanvasSprite.prototype.changeImage=function(index) { this.index =index; this.vOffset = Math.floor(this.index*this.width / this.imagesWidth) * this.height; this.hOffset = (this.index*this.width) % this.imagesWidth; } CanvasSprite.prototype.show=function() { this.hide = false; } CanvasSprite.prototype.hide=function() { this.hide = true; } CanvasSprite.prototype.destroy=function () { return; } //精灵的行为,交给实现了ac()方法的对象 CanvasSprite.prototype.move= function(drawTarget) { this.act.ac(this,drawTarget); } //精灵1的动作 function action(){ this.ac=function(canvasSprite,drawTarget){ var maxX=drawTarget.width - 64; var maxY= drawTarget.height - 64; canvasSprite.x += 2; canvasSprite.y += 2; canvasSprite.index++; if(canvasSprite.index>=5) canvasSprite.index=0; if(canvasSprite.x>maxX) canvasSprite.x-=2; if(canvasSprite.y>maxY) canvasSprite.y-=2; canvasSprite.changeImage(canvasSprite.index); } } //精灵2的动作 function action1(){ this.ac=function(canvasSprite,drawTarget){ canvasSprite.index++; if(canvasSprite.index>=4) canvasSprite.index=0; canvasSprite.changeImage(canvasSprite.index); } } window.onload=function() { var canvas = document.getElementById('draw-target'); var ctx=canvas.getContext("2d"); var drawTarget=document.getElementById("draw-target"); //精灵1的参数 var para={ x:0, y:0, index:0, images: 'cogs.png', imagesWidth: 256, width: 64, height: 64, ctx:ctx, act:new action() } //精灵2的参数 var para1={ x:200, y:0, index:0, images: 'ren.png', imagesWidth: 240, width: 60, height: 60, ctx:ctx, act:new action1() } var sprite1=new CanvasSprite(para); var sprite2=new CanvasSprite(para1); function moveAll() { ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); sprite2.move(drawTarget); sprite1.move(drawTarget); sprite2.draw(); sprite1.draw(); setTimeout(moveAll, 50); } moveAll(); } </script> </head> <body> 精灵动画. <canvas id="draw-target" width = 480 height = 320> 浏览器不支持HTML5 </canvas> </body> </html>
下载源代码:http://www.108js.com/article/article3/30161.html
发表评论
-
HTML5 Canvas 旋转的“金字塔”
2015-12-24 13:25 10028效果图: 效果链接:http://www.108js.co ... -
HTML5 canvas 飘扬的五星红旗
2015-12-21 08:56 2375效果图: 效果链接: http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12903效果图: 效果链接: http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7392效果图: 效果链接: http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1585效果图: 点击观看效果:http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3208网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三(游戏面板)
2014-07-05 07:13 1374接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)
2014-07-04 13:08 1664接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)
2014-07-04 10:53 2337在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏(数字版)
2014-06-28 17:38 2494今天网上发现了一段代码,只有界面,很不错,学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1081效果图: 点击查看效果: http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 1938效果图: 点击看效果: http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1665先要准备应付各种浏览器的声音文件,什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 1908看到哪,学到哪,记到哪。见谅,这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 2927一直在学习HTML5 Canvas相关内容,游戏,动画 ... -
javaScript 广度优先搜索法"自动推箱子"(一)
2014-06-12 09:45 1784用JS写了一个“广度优先搜索法”自动推箱子,理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2221欢迎访问博主的网站:http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1404点击这里可以查看动画效果: http://www.108js. ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2412<!DOCTYPE HTML> <html& ... -
HTML5 Canvas动画模板
2014-05-21 10:59 1027创建HTML5的画布动画,我们可以使用requestAn ...
相关推荐
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
HTML5 canvas 精灵坐标
全屏背景动画的实现是由canvas完成
html5 canvas小人跳舞动画特效
HTML5 Canvas粒子火焰动画特效,
在HTML5中,Canvas上不仅可以绘制图形和动画,还可以实现各种炫酷的文字动画特效。之前分享过一篇文章7款超华丽的HTML5 Canvas文字动画特效,其中就有不少令人惊叹的HTML5文字特效。这次我们给大家分享的也是一款...
jquery html5 canvas翻滚熔岩动画背景特效 jqueryhtml5 canvas翻滚熔岩动画背景特效
HTML5 Canvas表白爱心动画特效是一款浪漫酷炫的情人节告白爱心动画特效。
8款炫酷HTML5 Canvas星空背景动画 8款炫酷HTML5 Canvas星空背景动画 8款炫酷HTML5 Canvas星空背景动画
html5 canvas流动的瀑布动画特效 html5 canvas流动的瀑布动画特效
HTML5 Canvas赛车游戏动画,赛车游戏动画演示。
这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果,跟随鼠标移动的HTML5交互式渐变背景动画特效。
html5 canvas毕达哥拉斯树生长动画特效 html5 canvas毕达哥拉斯树生长动画特效
html5 canvas熊熊火焰动画特效
Html5 canvas制作的赛车游戏动画,请注意是动画,没有交互等功能
超炫酷HTML5 Canvas蝴蝶飞舞动画 超炫酷HTML5 Canvas蝴蝶飞舞动画
HTML5 Canvas氏量图转动动画实例,齿轮转动动画,齿轮是基于HTML5生成的,动画效果也是生成的,怎么样呢?是不是很酷呢?
HTML5 Canvas炫酷3D背景动画代码.
HTML5 Canvas绕月球动画特效是一款酷炫的卡通月球旋转动画特效下载。
我们可以在Canvas上绘制很多图形,也可以利用HTML技术在Canvas上制作一些复杂的动画,之前我们也分享过一些基于HTML5 Canvas的火焰动画,例如这个HTML5 Canvas幻彩火焰文字特效和更早以前分享的HTML5 Canvas火焰燃烧...