from:tec.5lulu.com
HTML的一大劣势就是对于多媒体技术支持的缺乏。在HTML中，你无法直接显示一个视频或在屏幕上绘画。在HTML5中，随着<video>与<canvas>元素的引进。这些元素给予开发者直接使用“纯粹的”HTML来实现多媒体技术的可能性——仅需要写一些Javascript代码来配合HTML。在多媒体技术中，有一个基本的技术应该被支持——动画。在HTML5中，有不少方式能够实现该功能。
在这篇文章中，我仅将最新的<canvas>元素与即将到来的CSS3动画技术进行比较。其他的可能性包括DOM元素或SVG元素的创建和动画。这些可能性将不在本文中进行讨论。从开始就应该注意到canvas技术在当前发布的大部分主流浏览器都给予了支持，而CSS3动画仅在最新的FireFox与Chrome浏览器中才有实现的可能，下一个版本的IE也将提供对CSS3动画的支持。（所以本文中所有演示代码的效果，在Win 7系统下当前最新版的Chrome浏览器中都可实现，但在其他操作系统与其他浏览器中，并不一定能看到所有演示代码的效果）。
这里我选择了一个比较简单的动画：
PS：由于显卡、录制的帧间隔，以及可能你电脑处理器的原因，播放过程可能有些不太流畅或者失真！
分三种方式实现：
(1) canvas元素结合JS
(2) 纯粹的CSS3动画（暂不被所有主流浏览器支持，比如IE）
(3) CSS3结合Jquery实现
知道如何使用CSS3动画比知道如何使用<canvas>元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，比如CSS)，而我们使用canvas自定义画出来的效果却不能被优化。原因又在于，浏览器使用的硬件主要取决于显卡的能力。目前，浏览器没有给予我们直接访问显卡的权力，比如，每一个绘画操作都不得不在浏览器中先调用某些函数。
让我们从Canvas开始
HTML代码：
[html] view plaincopyprint?
<html> <head> <meta charset="UTF-8" /> <title>Animation in HTML5 using the canvas element</title> </head> <body onload="init();"> <canvas id="canvas" width="1000" height="600">Your browser does not support the <code><canvas></code>-element.Please think about updating your brower!</canvas> <div id="controls"> <button type="button" onclick="speed(-0.1);">Slower</button> <button type="button" onclick="play(this);">Play</button> <button type="button" onclick="speed(+0.1)">Faster</button> </div> </body> </html>JS代码：
定义一些变量：
[javascript] view plaincopyprint?
var dx=5, //当前速率 rate=1, //当前播放速度 ani, //当前动画循环 c, //画图(Canvas Context) w, //汽车[隐藏的](Canvas Context) grassHeight=130, //背景高度 carAlpha=0, //轮胎的旋转角度 carX=-400, //x轴方向上汽车的位置(将被改变) carY=300, //y轴方向上汽车的位置(将保持为常量) carWidth=400, //汽车的宽度 carHeight=130, //汽车的高度 tiresDelta=15, //从一个轮胎到最接近的汽车底盘的距离 axisDelta=20, //汽车底部底盘的轴与轮胎的距离 radius=60; //轮胎的半径
为了实例化汽车canvas(初始时被隐藏)，我们使用下面的自执行的匿名函数
[javascript] view plaincopyprint?
(function(){ var car=document.createElement('canvas'); //创建元素 car.height=carHeight+axisDelta+radius; //设置高度 car.width=carWidth; //设置宽度 w=car.getContext('2d'); })();
点击“Play”按钮，通过定时重复执行“画汽车”操作，来模拟“帧播放”功能：
[javascript] view plaincopyprint?
function play(s){ //参数s是一个button if(ani){ //如果ani不为null，则代表我们当前已经有了一个动画 clearInterval(ani); //所以我们需要清除它(停止动画) ani=null; s.innerHTML='Play'; //重命名该按钮为“播放” }else{ ani=setInterval(drawCanvas,40); //我们将设置动画为25fps[帧每秒]，40/1000，即为二十五分之一 s.innerHTML='Pause'; //重命名该按钮为“暂停” } }
加速，减速，通过以下方法，改变移动距离的大小来实现：
[javascript] view plaincopyprint?
function speed(delta){ var newRate=Math.max(rate+delta,0.1); dx=newRate/rate*dx; rate=newRate; }
页面加载的初始化方法：
[javascript] view plaincopyprint?
//init function init(){ c=document.getElementById('canvas').getContext('2d'); drawCanvas(); }
主调方法：
[javascript] view plaincopyprint?
function drawCanvas(){ 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; } }
画背景：
相关文章
精彩导读
热门资讯
关注我们
