html5 canvas动画？canvas动画特效
大家好，今天来为大家解答html5 canvas动画这个问题的一些问题点，包括canvas动画特效也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来...
大家好，今天来为大家解答html5 canvas动画这个问题的一些问题点，包括canvas动画特效也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~
如何使用html5与css3完成google涂鸦动画
知道如何使用CSS3动画比知道如何使用<canvas>元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，比如CSS)，而我们使用canvas自定义画出来的效果却不能被优化。原因又在于，浏览器使用的硬件主要取决于显卡的能力。目前，浏览器没有给予我们直接访问显卡的权力，比如，每一个绘画操作都不得不在浏览器中先调用某些函数。1.canvashtml代码：
代码如下:
<html><head><metacharset="UTF-8"/><title>AnimationinHTML5usingthecanvaselement</title></head><bodyonload="init();"><canvasid="canvas"width="1000"height="600">Yourbrowserdoesnotsupportthe<code><canvas></code>-element.Pleasethinkaboutupdatingyourbrower!</canvas><divid="controls"><buttontype="button"onclick="speed(-0.1);">Slower</button><buttontype="button"onclick="play(this);">Play</button><buttontype="button"onclick="speed(+0.1)">Faster</button></div></body></html>
js代码：定义一些变量：
代码如下:
vardx=5,//当前速率rate=1,//当前播放速度ani,//当前动画循环c,//画图(CanvasContext)w,//汽车[隐藏的](CanvasContext)grassHeight=130,//背景高度carAlpha=0,//轮胎的旋转角度carX=-400,//x轴方向上汽车的位置(将被改变)carY=300,//y轴方向上汽车的位置(将保持为常量)carWidth=400,//汽车的宽度carHeight=130,//汽车的高度tiresDelta=15,//从一个轮胎到最接近的汽车底盘的距离axisDelta=20,//汽车底部底盘的轴与轮胎的距离radius=60;//轮胎的半径
为了实例化汽车canvas(初始时被隐藏)，我们使用下面的自执行的匿名函数
代码如下:
(function(){varcar=document.createElement('canvas');//创建元素car.height=carHeight+axisDelta+radius;//设置高度car.width=carWidth;//设置宽度w=car.getContext('2d');})();
点击“Play”按钮，通过定时重复执行“画汽车”操作，来模拟“帧播放”功能：
代码如下:
functionplay(s){//参数s是一个buttonif(ani){//如果ani不为null，则代表我们当前已经有了一个动画clearInterval(ani);//所以我们需要清除它(停止动画)ani=null;s.innerHTML='Play';//重命名该按钮为“播放”}else{ani=setInterval(drawCanvas,40);//我们将设置动画为25fps[帧每秒]，40/1000，即为二十五分之一s.innerHTML='Pause';//重命名该按钮为“暂停”}}
加速，减速，通过以下方法，改变移动距离的大小来实现：
代码如下:
functionspeed(delta){varnewRate=Math.max(rate+delta,0.1);dx=newRate/rate*dx;rate=newRate;}页面加载的初始化方法：//initfunctioninit(){c=document.getElementById('canvas').getContext('2d');drawCanvas();}
主调方法：
代码如下:
functiondrawCanvas(){c.clearRect(0,0,c.canvas.width,c.canvas.height);//清除Canvas(已显示的)，避免产生错误c.save();//保存当前坐标值以及状态，对应的类似“push”操作drawGrass();//画背景c.translate(carX,0);//移动起点坐标drawCar();//画汽车(隐藏的canvas)c.drawImage(w.canvas,0,carY);//画最终显示的汽车c.restore();//恢复Canvas的状态，对应的是类似“pop”操作carX+=dx;//重置汽车在X轴方向的位置，以模拟向前走carAlpha+=dx/radius;//按比例增加轮胎角度if(carX>c.canvas.width){//设置某些定期的边界条件carX=-carWidth-10;//也可以将速度反向为dx*=-1;}}
画背景：
代码如下:
functiondrawGrass(){//创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标vargrad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height);//为线性渐变指定渐变色，0表示渐变起始色，1表示渐变终止色grad.addColorStop(0,'#33CC00');grad.addColorStop(1,'#66FF22');c.fillStyle=grad;c.lineWidth=0;c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight);}
画车身：
代码如下:
functiondrawCar(){w.clearRect(0,0,w.canvas.width,w.canvas.height);//清空隐藏的画板w.strokeStyle='#FF6600';//设置边框色w.lineWidth=2;//设置边框的宽度，单位为像素w.fillStyle='#FF9900';//设置填充色w.beginPath();//开始绘制新路径w.rect(0,0,carWidth,carHeight);//绘制一个矩形w.stroke();//画边框w.fill();//填充背景w.closePath();//关闭绘制的新路径drawTire(tiresDelta+radius,carHeight+axisDelta);//我们开始画第一个轮子drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta);//同样的，第二个}
画轮胎：
代码如下:
functiondrawTire(x,y){w.save();w.translate(x,y);w.rotate(carAlpha);w.strokeStyle='#3300FF';w.lineWidth=1;w.fillStyle='#0099FF';w.beginPath();w.arc(0,0,radius,0,2*Math.PI,false);w.fill();w.closePath();w.beginPath();w.moveTo(radius,0);w.lineTo(-radius,0);w.stroke();w.closePath();w.beginPath();w.moveTo(0,radius);w.lineTo(0,-radius);w.stroke();w.closePath();w.restore();}
由于原理简单，并且代码中作了详细注释，这里就不一一讲解！2.CSS3你将看到我们未通过一句JS代码就完全实现了和上面一样的动画效果：HTML代码：
代码如下:
<html><head><metacharset="UTF-8"/><title>AnimationsinHTML5usingCSS3animations</title></head><body><divid="container"><divid="car"><divid="chassis"></div><divid="backtire"><div></div><div></div></div><divid="fronttire"><div></div><div></div></div></div><divid="grass"></div></div><footer></footer></body></html>CSS代码：body{padding:0;margin:0;}
定义车身与轮胎转到的动画（你会看到基本每一个动画都有四个版本的定义：原生版本/webkit【Chrome|Safari】/ms【为了向后兼容IE10】/moz【FireFox】）
代码如下:
/*定义动画：从-400px的位置移动到1600px的位置*/@keyframescarAnimation{0%{left:-400px;}/*指定初始位置，0%等同于from*/100%{left:1600px;}/*指定最终位置,100%等同于to*/}/*SafariandChrome*/@-webkit-keyframescarAnimation{0%{left:-400px;}100%{left:1600px;}}/*Firefox*/@-moz-keyframescarAnimation{0%{left:-400;}100%{left:1600px;}}/*IE暂不支持,此处定义是为了向后兼容IE10*/@-ms-keyframescarAnimation{0%{left:-400px;}100%{left:1600px;}}@keyframestyreAnimation{0%{transform:rotate(0);}100%{transform:rotate(1800deg);}}@-webkit-keyframestyreAnimation{0%{-webkit-transform:rotate(0);}100%{-webkit-transform:rotate(1800deg);}}@-moz-keyframestyreAnimation{0%{-moz-transform:rotate(0);}100%{-moz-transform:rotate(1800deg);}}@-ms-keyframestyreAnimation{0%{-ms-transform:rotate(0);}100%{-ms-transform:rotate(1800deg);}}#container{position:relative;width:100%;height:600px;overflow:hidden;/*这个很重要*/}#car{position:absolute;/*汽车在容器中采用绝对定位*/width:400px;height:210px;/*汽车的总高度，包括轮胎和底盘*/z-index:1;/*让汽车在背景的上方*/top:300px;/*距顶端的距离(y轴)*/left:50px;/*距左侧的距离(x轴)*//*以下内容赋予该元素预先定义的动画及相关属性*/-webkit-animation-name:carAnimation;/*名称*/-webkit-animation-duration:10s;/*持续时间*/-webkit-animation-iteration-count:infinite;/*迭代次数-无限次*/-webkit-animation-timing-function:linear;/*播放动画时从头到尾都以相同的速度*/-moz-animation-name:carAnimation;/*名称*/-moz-animation-duration:10s;/*持续时间*/-moz-animation-iteration-count:infinite;/*迭代次数-无限次*/-moz-animation-timing-function:linear;/*播放动画时从头到尾都以相同的速度*/-ms-animation-name:carAnimation;/*名称*/-ms-animation-duration:10s;/*持续时间*/-ms-animation-iteration-count:infinite;/*迭代次数-无限次*/-ms-animation-timing-function:linear;/*播放动画时从头到尾都以相同的速度*/animation-name:carAnimation;/*名称*/animation-duration:10s;/*持续时间*/animation-iteration-count:infinite;/*迭代次数-无限次*/animation-timing-function:linear;/*播放动画时从头到尾都以相同的速度*/}/*车身*/#chassis{position:absolute;width:400px;height:130px;background:#FF9900;border:2pxsolid#FF6600;}/*轮胎*/.tire{z-index:1;/*同上，轮胎也应置于背景的上方*/position:absolute;bottom:0;border-radius:60px;/*圆半径*/height:120px;/*2*radius=height*/width:120px;/*2*radius=width*/background:#0099FF;/*填充色*/border:1pxsolid#3300FF;-webkit-animation-name:tyreAnimation;-webkit-animation-duration:10s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:tyreAnimation;-moz-animation-duration:10s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;-ms-animation-name:tyreAnimation;-ms-animation-duration:10s;-ms-animation-iteration-count:infinite;-ms-animation-timing-function:linear;animation-name:tyreAnimation;animation-duration:10s;animation-iteration-count:infinite;animation-timing-function:linear;}#fronttire{right:20px;/*设置右边的轮胎距离边缘的距离为20*/}#backtire{left:20px;/*设置左边的轮胎距离边缘的距离为20*/}#grass{position:absolute;/*背景绝对定位在容器中*/width:100%;height:130px;bottom:0;/*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值*/background:linear-grdaient(bottom,#33CC00,#66FF22);background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);background:-moz-linear-gradient(bottom,#33CC00,#66FF22);background:-ms-linear-gradient(bottom,#33CC00,#66FF22);}.hr,.vr{position:absolute;background:#3300FF;}.hr{height:1px;width:100%;/*轮胎的水平线*/left:0;top:60px;}.vr{width:1px;height:100%;/*轮胎的垂直线*/left:60px;top:0;}
3.JQuery与CSS3这是一个效果与兼容性俱佳的方式（特别对于IE9暂不支持CSS3而言）HTML代码（可以看到与CSS3中的HTML代码并无不同）：
代码如下:
<html><head><metacharset="UTF-8"/><title>AnimationsinHTML5usingCSS3animations</title></head><body><divid="container"><divid="car"><divid="chassis"></div><divid="backtire"><div></div><div></div></div><divid="fronttire"><div></div><div></div></div></div><divid="grass"></div></div><footer></footer></body></html>CSS:<style>body{padding:0;margin:0;}#container{position:relative;width:100%;height:600px;overflow:hidden;/*这个很重要*/}#car{position:absolute;/*汽车在容器中采用绝对定位*/width:400px;height:210px;/*汽车的总高度，包括轮胎和底盘*/z-index:1;/*让汽车在背景的上方*/top:300px;/*距顶端的距离(y轴)*/left:50px;/*距左侧的距离(x轴)*/}/*车身*/#chassis{position:absolute;width:400px;height:130px;background:#FF9900;border:2pxsolid#FF6600;}/*轮胎*/.tire{z-index:1;/*同上，轮胎也应置于背景的上方*/position:absolute;bottom:0;border-radius:60px;/*圆半径*/height:120px;/*2*radius=height*/width:120px;/*2*radius=width*/background:#0099FF;/*填充色*/border:1pxsolid#3300FF;-o-transform:rotate(0deg);/*旋转(单位：度)*/-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);}#fronttire{right:20px;/*设置右边的轮胎距离边缘的距离为20*/}#backtire{left:20px;/*设置左边的轮胎距离边缘的距离为20*/}#grass{position:absolute;/*背景绝对定位在容器中*/width:100%;height:130px;bottom:0;/*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值*/background:linear-grdaient(bottom,#33CC00,#66FF22);background:-webkit-linear-gradient(bottom,#33CC00,#66FF22);background:-moz-linear-gradient(bottom,#33CC00,#66FF22);background:-ms-linear-gradient(bottom,#33CC00,#66FF22);}.hr,.vr{position:absolute;background:#3300FF;}.hr{height:1px;width:100%;/*水平线*/left:0;top:60px;}.vr{width:1px;height:100%;/*垂直线*/left:60px;top:0;}</style>
JS代码：首先引入在线API：
代码如下:
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
实现动画代码（相当简洁）：
代码如下:
<script>$(function(){varrot=0;varprefix=$('.tire').css('-o-transform')?'-o-transform':($('.tire').css('-ms-transform')?'-ms-transform':($('.tire').css('-moz-transform')?'-moz-transform':($('.tire').css('-webkit-transform')?'-webkit-transform':'transform')));varorigin={/*设置我们的起始点*/left:-400};varanimation={/*该动画由jQuery执行*/left:1600/*设置我们将移动到的最终位置*/};varrotate=function(){/*该方法将被旋转的轮子调用*/rot+=2;$('.tire').css(prefix,'rotate('+rot+'deg)');};varoptions={/*将要被jQuery使用的参数*/easing:'linear',/*指定速度，此处只是线性，即为匀速*/duration:10000,/*指定动画持续时间*/complete:function(){$('#car').css(origin).animate(animation,options);},step:rotate};options.complete();});</script>
如何用HTML5实现图片转圈的动画效果
canvas百度下不就知道了，问毛线问
HTML5动画有什么用途
html5动画主要服务对象还是给予web的应用，并不会对全部app开发造成威胁，这样有利于不同类型应用使用不同的开发方式，灵活性更强。利用HTML5开发移动应用的优点主要有以下几点：
1.离线缓存为HTML5开发移动应用提供了基础HTML5WebStorageAPI可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。同时，这个功能算得上是另一个方向的后台“操作记录”，而不占用任何后台资源，减轻设备硬件压力，增加运行流畅性。
2.音频视频自由嵌入，多媒体形式更为灵活原生开发方式对于文字和音视频混排的多媒体内容处理相对麻烦，需要拆分开文字、图片、音频、视频，解析对应的URL并分别用不同的方式处理。HTML5在这个方面完全不受限制，可以完全放在一起进行处理。
3.地理定位，随时随地分享位置充分发挥移动设备对定位上的优势，推动LBS应用发展。可以综合使用GPS、wifi、手机等方式让定位更为精准、灵活。地理位置定位，让定位和导航不再专属导航软件，地图也不用下载非常大的地图包，可以通过缓存来解决，到哪儿下哪儿，更灵活。
4.Canvas绘图，提升移动平台的绘图能力使用CanvasAPI可以简单绘制热点图收集用户体验资料支持图片的移动、旋转、缩放等常规编辑Canvas–2D的绘图功能支持Canvas3D–3D的绘图功能支持SVG–向量图支援
5.专为移动平台定制的表单元素浏览器中出现的html5表单元素与对应的键盘：只需要简单的声明<inputtype=”email”>即可完成对不同样式键盘的调用，简捷方便。
6.丰富的交互方式支持提升互动能力：拖拽、撤销历史操作、文本选择等Transition–组件的移动效果Transform–组件的变形效果Animation–将移动和变形加入动画支持
7.HTML5使用上的优势更低的开发及维护成本;使页面变得更小，减少了用户不必要的支出;而且，性能更好使耗电量更低;方便升级，打开即可使用最新版本，免去重新下载升级包的麻烦，使用过程中就直接更新了离线缓存。
8.CSS3视觉设计师的辅助利器CSS3支持了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能。Selector–更有弹性的选择器Webfonts–嵌入式字体Layout–多样化的排版选择Stlyingradiusgradientshadow–圆角、渐变、阴影Borderbackground–边框的背景支持使用CSS3来完成部分视觉工作，载入速度快，节省代码及图片，也为用户节约了带宽。
9.实时通讯以往网站由于HTTP协议以及浏览器的设计，实时的互动性相当的受限，只能使用一些技巧来「仿真」实时的通讯效果，但HTML5提供了完善的实时通讯支持。
10.档案以及硬件支持不知道大家有没有发现，在Gmail等新的网页程序当中，已经可以透过拖拉的方式将档案作为邮件附件?这就是HTML5档案的功能中的Drag’nDrop和FileAPI。
11.语意化语意化的网络是可以让计算机能够更加理解网页的内容，对于像是搜索引擎的优化(SEO)或是推荐系统可以有很大的帮助。
12.双平台融合的app开发方式，提高工作效率依照目前iPhone/Android迅速提升市占率的情势来看，未来如果想要在先进的智慧型手机上撰写应用程式，要不是选择使用Objective-C+CocoaTouchFramework撰写iPhone/iPad应用程式，就是选择Java+AndroidFramework撰写
怎样用html5做出翻页的效果
对！html5的动画效果是用（js）jQuery+css3做的！html5绘图是用HTML5Canvas画图标签加上API做的！
HTML5用canvas怎么实现动画效果
HTML5<canvas>元素用于图形的绘制，通过脚本(通常是JavaScript)来完成。<canvas>标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用canvas绘制路径,盒、圆、字符以及添加图像。
好了，文章到此结束，希望可以帮助到大家。
本文链接：http://www.depponpd.com/ke/3641.html