- 浏览: 297648 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
开发小菜:
支持IE9以下的吗?
HTML5+CSS3+JQuery打造自定义视频播放器 -
攻城使:
开发Html5必须得下载么,我用dw编写,把文件复制到myec ...
html5开发 myeclipse安装aptana插件 -
疾风鹰狼:
...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 -
sardodo:
你好,我想问下,导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识 -
BIOHAZARDX:
下载学习,初学者膜拜一下。
html5 实现动画(三)
<canvas id="canvas3" width="250" height="300" style="background-color:black">
你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
帧数:<input id="txt4" type="text" value="10"/><br/>
速度:<input type="text" id="txt5" value="5"/><br/>
比例:<input type="text" id="txt6" value="2"/><br/>
<input type="button" value="开始" onclick="animate()"/>
<input type="button" value="暂停" onclick="stop()"/>
<script type="text/javascript">
//定时器
var interval=null;
//停止动画
function stop(){
clearInterval(interval);
}
//===================================================================
//精灵登场
//====================================================================
//每一帧在大图中的位置
var frames=[];
frames[0]=[0,4,19,19];
frames[1]=[22,1,24,19];
frames[2]=[49,0,18,17];
frames[3]=[1,32,18,17];
frames[4]=[22,33,24,19];
frames[5]=[49,36,19,19];
//精灵类
function Sprite(dx,dy,delta,fps){
this.dx=dx;
this.dy=dy;
this.fps=fps;
this.delay=1000/fps;
this.last_update=0;
//移动速度
this.delta=-delta;
//帧编号
this.index=0;
//方向
this.dir_left=true;
}
Sprite.prototype.update=function(canvas){
//获取当前时间
var now=(new Date()).getTime();
if((now-this.last_update)>this.delay){
if(this.dir_left){
//方向朝左,只绘制0 1 2帧
if(this.index>2)
this.index=0;
}
else{
//方向朝右,只绘制 3 4 5 帧
if(this.index>5)
this.index=3;
}
//取出当前帧的坐标
this.frame=frames[this.index];
//当前帧在大图中的位置
this.sx=this.frame[0];
this.sy=this.frame[1];
this.sw=this.frame[2];
this.sh=this.frame[3];
//当前帧大小
this.dw=this.frame[2];
this.dh=this.frame[3];
//改变 x 坐标
this.dx=this.dx+this.delta;
//左边缘检测
if(this.dx<0){
this.dx=0;
//转向
this.delta=-this.delta;
this.dir_left=false;
this.index=3;
}
//右边缘检测
if((this.dx+this.dw)>canvas.getAttribute("width")){
this.dx=canvas.getAttribute("width")-this.dw;
//转向
this.delta=-this.delta;
this.dir_left=true;
this.index=0;
}
this.dy=this.dy;//y 不移动
this.index++;
this.last_update=now;
}
}
function animate(){
//停止动画
stop();
//移动速度
var delta=parseInt(document.getElementById('txt4').value);
//每秒绘制多少次
var fps=parseInt(document.getElementById('txt5').value);
//比例
var scale=parseInt(document.getElementById('txt6').value);
//画布对象
var canvas=document.getElementById("canvas3")
//获取上下文对象
var ctx = canvas.getContext("2d");
//清空画布
ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));
var img=new Image();
img.src="http://www.crazyfrom.com/images/2010/10/sprite.gif";
var sprite=new Sprite(120,150,delta,fps);
interval = setInterval(function(){
//清空画布
ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));
//更新数据
sprite.update(canvas);
//保存状态
ctx.save();
//移动坐标
ctx.translate(sprite.dx,sprite.dy);
ctx.scale(scale,scale);
ctx.drawImage(img,sprite.sx,sprite.sy,sprite.sw,sprite.sh,0,0,sprite.dw,sprite.dh);
//恢复状态
ctx.restore();
},1);
}
</script>
你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
帧数:<input id="txt4" type="text" value="10"/><br/>
速度:<input type="text" id="txt5" value="5"/><br/>
比例:<input type="text" id="txt6" value="2"/><br/>
<input type="button" value="开始" onclick="animate()"/>
<input type="button" value="暂停" onclick="stop()"/>
<script type="text/javascript">
//定时器
var interval=null;
//停止动画
function stop(){
clearInterval(interval);
}
//===================================================================
//精灵登场
//====================================================================
//每一帧在大图中的位置
var frames=[];
frames[0]=[0,4,19,19];
frames[1]=[22,1,24,19];
frames[2]=[49,0,18,17];
frames[3]=[1,32,18,17];
frames[4]=[22,33,24,19];
frames[5]=[49,36,19,19];
//精灵类
function Sprite(dx,dy,delta,fps){
this.dx=dx;
this.dy=dy;
this.fps=fps;
this.delay=1000/fps;
this.last_update=0;
//移动速度
this.delta=-delta;
//帧编号
this.index=0;
//方向
this.dir_left=true;
}
Sprite.prototype.update=function(canvas){
//获取当前时间
var now=(new Date()).getTime();
if((now-this.last_update)>this.delay){
if(this.dir_left){
//方向朝左,只绘制0 1 2帧
if(this.index>2)
this.index=0;
}
else{
//方向朝右,只绘制 3 4 5 帧
if(this.index>5)
this.index=3;
}
//取出当前帧的坐标
this.frame=frames[this.index];
//当前帧在大图中的位置
this.sx=this.frame[0];
this.sy=this.frame[1];
this.sw=this.frame[2];
this.sh=this.frame[3];
//当前帧大小
this.dw=this.frame[2];
this.dh=this.frame[3];
//改变 x 坐标
this.dx=this.dx+this.delta;
//左边缘检测
if(this.dx<0){
this.dx=0;
//转向
this.delta=-this.delta;
this.dir_left=false;
this.index=3;
}
//右边缘检测
if((this.dx+this.dw)>canvas.getAttribute("width")){
this.dx=canvas.getAttribute("width")-this.dw;
//转向
this.delta=-this.delta;
this.dir_left=true;
this.index=0;
}
this.dy=this.dy;//y 不移动
this.index++;
this.last_update=now;
}
}
function animate(){
//停止动画
stop();
//移动速度
var delta=parseInt(document.getElementById('txt4').value);
//每秒绘制多少次
var fps=parseInt(document.getElementById('txt5').value);
//比例
var scale=parseInt(document.getElementById('txt6').value);
//画布对象
var canvas=document.getElementById("canvas3")
//获取上下文对象
var ctx = canvas.getContext("2d");
//清空画布
ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));
var img=new Image();
img.src="http://www.crazyfrom.com/images/2010/10/sprite.gif";
var sprite=new Sprite(120,150,delta,fps);
interval = setInterval(function(){
//清空画布
ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));
//更新数据
sprite.update(canvas);
//保存状态
ctx.save();
//移动坐标
ctx.translate(sprite.dx,sprite.dy);
ctx.scale(scale,scale);
ctx.drawImage(img,sprite.sx,sprite.sy,sprite.sw,sprite.sh,0,0,sprite.dw,sprite.dh);
//恢复状态
ctx.restore();
},1);
}
</script>
- donghua3.rar (1.4 KB)
- 下载次数: 236
发表评论
-
iframe 高度自适应
2011-11-03 17:07 1318转自:http://apps.hi.baidu.com/sha ... -
WordPress 博客添加新浪微博挂件:
2011-06-22 14:07 14361.点击链接http://t.sina ... -
HTML5 影音 ( Video ) 概論
2011-05-25 16:25 10031 Video介紹 引用我翻譯文檔《在HTML5頁面 ... -
HTML5 Audio Loops
2011-05-19 16:49 1242One of the neatest things abo ... -
处理火狐自动播放视频
2011-05-18 17:54 1392版权声明:转载时请 ... -
教你用HTML5开发iPhone应用程序
2011-05-13 17:38 1130你一整年都像现在一样沮丧,这我知道。所有铁杆Objecti ... -
很给力,20个HTML5视频播放器及代码
2011-05-09 14:45 1921本文来源: http://www.uleadesi ... -
HTML 5 Video概述
2011-05-09 13:32 906本文来自:http://www.xlnv.ne ... -
支持移动平台的Html5播放器
2011-05-09 13:25 2850本文转自:http://www.riameeting ... -
HTML5 API简介一(Canvas,Audio/Video,Geolocation)
2011-05-09 13:22 1505本文来自:http://www.myext.cn/web ... -
HTML5资源
2011-05-09 11:56 1149JS APIs: 选择器 W3C草案:Selecto ... -
HTML5 Audio/Video 标签,属性,方法,事件
2011-05-09 11:53 1374本文转自:http://directguo.com/blo ... -
DIV实现隐藏与显示
2011-05-06 15:23 701css中display属性的参考值: display:n ... -
HTML5+CSS3+JQuery打造自定义视频播放器
2011-05-06 12:57 6677简介HTML5的<video> ... -
HTML 5 <video> preload 属性
2011-05-06 12:54 1077设置为预加载的 video 元素: <vide ... -
HTML5 – Video
2011-05-06 12:51 998在HTML5以前若我們要在網頁中播放影片時,需要使用Act ... -
超過 23 個開源的 HTML5 影音播放器與框架
2011-05-06 12:03 7476超過 23 個開源的 HTML5 影音播放器與框架 - ... -
Building a better HTML5 video player with Glow
2011-05-06 11:51 1030Last year I wrote a post (Bu ... -
Ambilight для тэга video
2011-05-06 11:49 737В некоторых топовых моделях т ... -
怎样用js+html5实现视频的播放控制
2011-05-06 11:46 1358html5 代码: <video width ...
相关推荐
html5实现的动画小人
html实现花瓣下落动画
HTML5实现五彩烟花动画特效,canvas炫彩烟火,高质量js源代码! HTML5实现五彩烟花动画特效,canvas炫彩烟火,高质量js源代码! HTML5实现五彩烟花动画特效,canvas炫彩烟火,高质量js源代码! HTML5实现五彩烟花...
这次我们要来分享一款很酷的HTML5动画,是一个可以旋转的大风车动画效果,回顾一下利用HTML5实现的旋转动画,我们可以看HTML5/CSS3实现3D旋转陀螺动画,它们的实现都是利用CSS3的transform:rotate属性,这款大风车...
前端web开发,情人节浪漫专属,表白源码。利用jquery+html5实现
HTML5 SVG实现可爱的小狗和狐狸动画 HTML5 SVG实现可爱的小狗和狐狸动画 HTML5 SVG实现可爱的小狗和狐狸动画
flash做的资源,把效果导成了图片,JavaScript+html5实现的动画效果,
HTML5实现3D效果实景地图,是一款3D实景地图,截取了实景的房屋大厦,并且可以旋转展示,具有非常强的立体效果!
html5实现的页面滚动图片动画加载特效源码
html5实现腾讯QQ登录界面背景动画特效(QQ背景动态)+js,可以有效的学习html标签,制作出所见即所得的东西。高大上的背景!
HTML5实现DNA螺旋动画效果演示.zip
使用html5与css3实现的动画小车页面,效果不错
这是一款基于HTML5 Canvas实现的雷达扫描动画特效源码,canvas是HTML5特有的画布工具,我们可以在canvas上绘制任意元素,包括3D元素。这款雷达扫描动画就是利用了canvas的灵活特性,利用js在canvas上绘制这些美丽的...
特效简介: jQuery Html5实现唯美表白动画代码,动画效果很棒,程序员表白必备! 注:线上预览不了,请下载至本地预览
html5结合Canvas实现的树叶飘落动画特效源码.zip
HTML5实现圣诞雪人动画代码基于HTML5、CSS3、prefixfree.min.js制作,雪人跳跃动画效果,红色网页背景,雪人戴着黑色帽子,蓝色围巾。
三种方式实现html5逐帧动画
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效