整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
览器和 JavaScript 的功能逐年不断的变强变大。曾几何时，任何类型的游戏都需要Flash。但随着 HTML5 发展，HTML5 + WebGL 游戏式就慢慢占领着这个舞台。以下是30款流行的游戏，它们可以在所有现代浏览器中运行，并且只使用web技术构建。
地址：http://hexgl.bkcore.com/
类型：街机，赛车
HexGL 是一款基于HTML5，JavaScript和WebGL的快节奏的赛车游戏。玩家可以使用键盘，触摸屏设备或leap motion(体感控制器)来控制太空飞船。
地址：http://www.cross-code.com/en/home
类型：动作，角色扮演
一个复古灵感的2D游戏设定在遥远的未来。这是一个充满伟大的游戏机制，如组合，拼图，技能树，任务，物品等等。
地址：https://sketch-out.appspot.com/
类型：街机
Sketchout的任务保护你的行星，并通过改变流星的方向来消灭对手，通过使流星偏转来保护您的星球并消灭对方，这款游戏有很棒的视觉效果和音乐特效。
地址：http://www.treasurearena.com/类型：多人，角色扮演，动作
Treasure Arena 是一款动态的竞技场战斗游戏，最多可容纳4名玩家。它具有不同的游戏模式，出色的帧率和配乐，是一个非常有趣的游戏。
地址：http://bejeweled.popcap.com/html5/
类型：街机，解谜，娱乐
HTML5格式的经典“宝石迷阵”游戏。这是一个官方克隆，因此可以正常运行且外观完美。
地址：http://missile-game.bwhmather.com/类型：街机
这是一款非常具有挑战性的游戏，游戏中我们扮演的是一枚被发射进隧道的导弹。游戏有很酷的黑白图像，玩的时候会有很强的场景效果。
地址：http://www.deconstructeam.com/games/gods-will-be-watching/类型：拼图
在这个令人毛骨悚然（但又很棒）的游戏中，我和自己团队必须独自生存40天。团队有六名成员，其中包括一只狗，一名精神病医生和一个机器人，您必须与他们互动，以使其保持温暖，温饱和理智的状态。
地址：http://www.sinuousgame.com/类型：街机
一个简单的游戏，极简的图形和流畅的帧率。拾取电源时避免与红点碰撞。此外，如果你想要那些额外的积分，就需要不停向前移动
地址：http://swooop.playcanvas.com/类型：街机
在一个美丽多彩的3D世界里，到处飞翔，收集宝石和星星。
地址：http://www.freeriderhd.com/
Free Rider HD 是一款令人上瘾的游戏，你可以在其他玩家绘制的赛道上骑自行车。可以在成千上万的播放器曲目中选择一个播放，也可以创建自己的曲目并分享。
地址：http://entanglement.gopherwoodstudios.com/zh-CN-index.html类型:拼图,娱乐
这个游戏的目的是通过在网格上放置线段来创建一条尽可能长的路径。你可以单独玩，也可以和朋友一起玩。
地址：https://www.modern.ie/en-us/ie6countdown#escape-from-xp
类型：动作，街机
用“Escape from XP”来庆祝 Windows XP 的终结。你的任务是拯救最后一个陷入Clippy暴政的开发人员。
地址：http://polycraftgame.com/类型：角色扮演，塔防，动作
在这个很棒的3D游戏中，你到处收集资源，建造东西，完成任务。关于它的所有东西都经过抛光，并且运行也非常顺畅。
地址：https://gabrielecirulli.github.io/2048/类型：拼图
一个非常上瘾的游戏，你可能已经玩过了。在 2048 ，你移动编号的图块并合并它们。当界面中最大数字是`2048 时，游戏胜利。
地址：http://arcade.lostdecadegames.com/onslaught_arena/
类型:动作
一种快节奏的复古生存游戏，您可以使用不同的武器与成群的敌人作战。
地址：http://chrome.angrybirds.com/类型:游戏
《愤怒的小鸟》游戏，这就不用介绍了。
地址:https://www.cubeslam.com/mcycrs
类型：街机，多人
具有丰富的色彩和炫酷的3D图形乒乓球游戏。我们可以通过向朋友发送一个URL来挑战他们，还可以通过网络摄像头看到对方。
地址：http://hypnoticowl.com/games/the-wizard/类型：动作，角色扮演，策略
Wizard 是基于回合的地牢爬行者，在里面会遇到神话般的怪物并找到奇妙的咒语。该游戏具有酷炫的战斗机制，有时可能会带来很大挑战。
地址：http://phoboslab.org/xtype/类型：动作，街机
在这款酷炫的太空射击游戏中，你目的就是要起战胜 Boss。
地址：http://orteil.dashnet.org/cookieclicker/类型：休闲，搞笑
Cookie clicker 是一款可能为了开玩笑而创建的游戏，但仍然提供了大量的乐趣。你可以从0个cookie开始，然后单击一些有效率的cookie，最后你可能会发现自己拥有数十亿个cookie。
地址：http://play.elevatorsaga.com/类型：拼图，编码
这类属于程序员类型游戏 。在电梯中的任务是通过对电梯的运动进行编程，以最有效的方式运送人员，这些都是用 JavaScript 来完成的。
地址：http://gameofbombs.com/landing类型：动作，角色扮演，多人
Game of Bombs是一个轰炸机类型的游戏，在广阔地图上，都有着敌方玩家。收集力量，皮肤和成就，以成为最佳轰炸机玩家的方式。
地址：http://or.paleozoic.com/类型：平台游戏，动作
Olympia Rising具有漂亮复古外观图形的游戏。它坐落在古希腊，在那里我们扮演的女人被赋予了重新的机会，所以我们的任务就是逃离死者的世界。
地址: https://ned.im/pixel-race-game/类型：街机，赛车
Pixel Race是一款简单概念概念，你可以在收集硬币的同时控制汽车以避开障碍物。如果有足够的耐心和空闲时间，那么你可能会打破记录（记录为36309个硬币）。
地址：https://littlealchemy.com/类型：拼图
从这四个基本元素开始，将它们组合起来，创建510种可能的组合。
地址：http://www.kevs3d.co.uk/dev/arena5/类型：街机
在数字领域中飞行并射击几何敌人以获得高分。
地址:https://vector-runner-remix.tresensa.com/
类型：街机
在这个充满色彩和几何形状的平台游戏中，尽你所能奔跑吧。
地址：http://playbiolab.com/类型:动作
一款出色的像素艺术平台游戏，你必须在这里逃脱充满突变生物和其他不良生物的实验室。
地址:http://worldsbiggestpacman.com/#类型：街机
地址：http://games.jessefreeman.com/new-super-resident-raver/
从即将到来的僵尸入侵中拯救惊慌失措的人们。收集钱，升级你的武器和战斗僵尸。
作者：Danny Markov 来源：tutorialzin 译者：前端小智
原文：https://tutorialzine.com/2015/02/30-amazing-games-made-only-with-html5
言
25年过去了，Brooks博士著名的“没有银弹”的论断依旧没有被打破。HTML5也是一样。但这并不妨碍HTML5是一个越来越有威力的“炸蛋”：发展迅速、势不可挡。随着HTML5技术的普及，用HTML5做可视化呈现的项目越来越多了。HTML5的优势明显：网页上直接运行无需插件、手机平板方便兼容、代码开发和维护相对容易，等等。一大波一大波的做Java、.NET甚至C++桌面的程序老手们都纷纷开始研究javascript了，而初出茅庐的新一代程序猿更是义无反顾的直奔HTML5这个技术大热点而来。
HTML5涵盖的技术点很多，甚至延伸到了前端、后端、通讯等各个层面。前端的canvas绘图这块无疑是它的核心内容。Canvas的API虽然不是很复杂很强大，但是做一般的2d绘图基本都够用了。基于这些API，一大堆的2d绘图组件纷纷出炉。Echarts、d3.js都是很不错的项目。 Echarts主要是chart组件，而d3相对杂一些，很多呈现方式很有创意，值得研究。
概述
研究d3的起因是最近有一个项目，用户截了一张效果图让我们用HTML5做一下：
看着很眼熟，搜了一下，感觉就是d3例子中的sunburst效果，程序在这里：
http://bl.ocks.org/mbostock/4063423
看上去似乎也不难，就是一圈一圈的饼图，把树状结构数据按占比一层一层绘制上去就行了。所以引起了自己动手做一个的兴趣。“sunburst”英文里应该是“云开日出”的意思，类似强烈的光芒从云层背后透射出来，不知为何中文里大多把它翻译成“日落”。比如这把Fender Telecaster吉他型号是Brown Sunburst款，就会被大家翻译成“日落色”。
关于日出和日落更喜欢哪一个的问题，网上还真有这样的调查。有意思的是，选择喜欢日落的远多于选择日出的。日出代表希望，日落代表成熟，都是一种美，哪个更美要看你个人的心境，因为它的美丽是由心生。为了不在这个问题上站错对，我们还是给他重新起一个更加响亮霸气的中文名字：“彩虹爆炸图”，怎么样?
仔细研究一下彩虹爆炸图的结构，无非就是一个树形结构，并采用发射状的布局。根节点在中间(也可以认为没有唯一的根，而是一堆根节点围绕在第一圈)，一次向外发散排列。每一个节点有名称、数值。节点可以按照自身数值在扇区所占比例进行绘制，这样就不用管节点具体数值有多大多小了。
这种图最先是由布朗大学教授John T. Stasko设计。
http://www.cc.gatech.edu/~john.stasko/
经过一天的折腾，终于做出了一个还算过得去的“彩虹爆炸图”。先上个图看看：
主要功能包括了：
可以通过json来定义数据和样式(类似百度的echarts那样);
颜色可以固定，也可以自动彩虹色;
自动计算数值及角度占比;
动态显示导航路径;
鼠标动态高亮显示路径;
动画飞入、展开导航路径;
文字显示及角度控制;
全矢量，可鼠标缩放、平移，不失真;
下面重点码一下折腾过程中的几个重点：
一、定义节点对象
首先定义每一个小扇片节点。每个扇片可以用一段饼图来绘制。为了简单方便，这里用了最简单高效偷懒的方法：用一个半径很粗的线画一段角度的arc，即可。如下图：
另外还有文字等内容。所以定义它的json结构大概如下：
var item={name: '名称', color: 'red', angle: '45', …};
此外，下一圈的数据，可直接定义为这个节点的“孩子节点”，直接在item中定义一个data的子节点数据：
var item={name: '名称', color: 'red', angle: '45', data:[
{name:’孩子一’, color:’green’,…},
{name:’孩子二’, color:’yellow’,…},
]};
这样就可以组成一个树状结构。接下来要在canvas上绘制图形了。为了方便，这里直接使用了矢量图进行定义：
twaver.Util.registerImage('node', {
v: [{
shape: 'circle',
r: ...
lineColor: function(data,view){return data.getClient("lineColor");},
lineWidth: ...
startAngle: ...
endAngle: ...
},{
shape: 'text',
textBaseline: 'middle',
textAlign: ...
text: ...
x: ...
y: ...
font: ...
fill: ...
rotate: ...
visible: ...
shadow: ...
}],
});
矢量图中定义了2个图形元素：一个arc弧线、一个文字对象，分别用于画node和绘制其文字。颜色、字体、是否可见、阴影、对齐、位置、线宽、角度…等等均在上面的定义中用一个function动态获取。例如，这个节点的半径，通过下面的方法，就可以在图形的lineColor属性中保存并驱动，需要修改，直接修改lineColor这个client属性即可，而不用去修改绘图参数，非常方便：
r:function(data,view){return data.getClient("lineColor");}
这里有一个比较啰嗦的地方是：每个扇片的角度需要根据每个item定义的原始值进行计算角度占比。而且，对于太小的扇片，可以给一定的最小值(例如 1度)，保证能视觉上看到它。否则，显示10000和1两个数值，由于对比过大，可能就杯具了，因为1连1度都占不到，显示效果会非常差。还有，每个扇片之间应该尽量留有一定的空隙。如果连续绘制，就会连成一片，没有“分片”感。这些可以在代码中进行简单控制。
二、文字控制
文字控制也比较啰嗦。首先是对齐方式。最简单的方式当然是让文字在所在扇片处，直接居中、旋转。这样文字会在径向的中间位置，如下图：
但这样显示感觉并不是很完美。对于中文来说，如果能统一靠近圆心方向的位置对齐，会更好看一些。这样，即使文字过长，也会向外延伸，不会和里面的重叠。如下图：
还有，当文字在左半圆时，如果不做特殊处理，文字旋转会导致文字大头朝下，阅读起来有把脖子歪断的风险。所以应该动态判断，如果文字在左侧，应该文字再增加旋转180度。同时左侧的文字对齐也要特殊考虑，应该变成右对齐，才能保持径向的整齐一致。
文字还有一个细节就是颜色和阴影的问题。不使用阴影，单纯的使用颜色(例如白色)，则在一些方向上的节点的文字会看不清楚，因为我们做的是彩虹爆炸图，各个方向颜色都不一样，而且还会随着圈数增加而变淡颜色，所以几乎不可能用一个固定的颜色(例如白色或黑色)能保证文字在所有地方都能和node颜色搭配并看清楚。所以思来想去还是使用了阴影效果。
联想了一下我们看美剧时候的字幕，似乎也是同样的问题。视频字幕要显示在千变万化的视频场景里面，视频场景的颜色完全随机出现无从知晓，要想让字幕看清楚，必然也会想一些办法解决。我们仔细观察一下视频字幕：
仔细观察，字幕是白色文字加了一圈黑色外框，这样就不怕任何场景了。我们在文字定义时也模拟一下，设置阴影和阴影偏移试一试：
fill:'white',
shadow: {
offsetX: 2,
offsetY: 2,
blur: 4,
color: 'black',
},
看一下使用前和使用后的效果对比：
使用阴影后不但文字更清晰了，而且也增加了立体感，效果还是不错的。下面图显示在应用在节点上的效果：
可见不论什么颜色，都能比较好的勾勒出文字轮廓，保持清晰可读。
三、生成彩虹颜色
关于颜色，是一个有趣的话题。对于广大程序猿来说，颜色是一个既简单又困难的东西。我们随手就能写下’red’, ‘green’, ‘orange’, ‘yellow’这样的色彩斑斓的颜色，还能保证没有语法错误;我们还会写’#FF55AA’、’#0c0’、’RGB(0,204,0)’、’ RGB(0%，80%，0%)’这样的各种颜色写法;我们也明白RGBA的含义和用途。但是，我们很少能把一个demo写的颜色很好看、很搭配。关于颜色和配色以后再专门讨论。这里我们只想自动生成一圈彩虹一样的颜色。用我们熟悉的RGB方法好像比较困难了。于是想起了那个HSV的颜色定义方法，它貌似很适合解决这个问题。
HSV颜色模型定义了色调H、饱和度S和亮度V，由A. R. Smith在1978年创建的一种颜色空间。其中H用一圈360度表示所有颜色，从红色开始按逆时针方向计算，红色为0度。饱和度S从0到1，越大越饱和。亮度V从0到255(也可以转换为从0到1，方便使用)，越大越明亮，越小越暗淡。
Js里面并没有直接处理HSV颜色的函数。不过用下面的代码很方便可以从hsv转为rgb：
写一个对应的js函数也很简单：
/* h, s, v (0 ~ 1) */
function getHSVColor(h, s, v) {
var r, g, b, i, f, p, q, t;
if (h && s===undefined && v===undefined) {
s=h.s, v=h.v, h=h.h;
}
i=Math.floor(h * 6);
f=h * 6 - i;
p=v * (1 - s);
q=v * (1 - f * s);
t=v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r=v, g=t, b=p; break;
case 1: r=q, g=v, b=p; break;
case 2: r=p, g=v, b=t; break;
case 3: r=p, g=q, b=v; break;
case 4: r=t, g=p, b=v; break;
case 5: r=v, g=p, b=q; break;
}
var rgb='#'+toHex(r * 255)+toHex(g * 255)+toHex(b * 255);
return rgb;
}
再回到我们的彩虹爆炸图。每一个节点对应的所在角度(中心角度)决定了它自己的颜色值。所以，我们可以直接根据这个角度得到颜色的h。然后，为了让彩虹逐渐一圈一圈变淡，再把s饱和度从1逐圈递减(例如0.1)，产生变淡的效果。为了防止圈太多最后看不清，减到0.2到0.3左右可以停止递减。
var fromAngle=node.getClient(‘fromAngle’);
var toAngle=node.getClient(‘toAngle’);
var level=node.getClient(‘level’);//节点在第几圈
var h=(fromAngle+to)/2 % 360 /360; //中心角度，并转换为弧度
var s=Math.max(0.2, 1-level*0.1);//每圈s递减0.1，直到0.2为止
var v=1;
var color=getHSVColor(h, s, v);
这样就获得了一圈颜色。实验效果如下：
如果相对某个节点的颜色做特殊处理，例如强制为橙色来凸显，我们可以在数据中定义时加个标记，设置颜色时候直接使用而不用计算即可。
{name:'浦东新区', value: 2600, color: '#FE9A2E'}
接下来要实现鼠标划过节点，自动计算路径、高亮路径节点、暗淡非路径节点。为了方便路径寻找，程序把每个节点的下一圈子数据定义为子节点，子节点通过getParent函数可以直接获得父对象。这样，通过不断getParent就可以获得整个路径上的节点，并修改其颜色为预设颜色，实现高亮效果：
var node=highlightedNode;
while(node){
node.setClient(‘color’, node.getClient(‘color.original’));
node=node.getParent;
}
对于非路径节点的颜色，可以设置为预设颜色但饱和度为0.1的淡颜色 ，让它变淡，以便突出高亮路径：
var color=getHSVColor(h, 0.1, v);
node.setClient(‘color’, color);
四、动画效果
最后，为了图形更生动，使用了一些动画效果。首先想到的就是图形出来时候，用动画从小到大发散开来，会很动感。这样做需要用动画函数来驱动每一个节点的半径位置，从0增加到所在的半径位置，如果大家一起设置，整个图就会动起来。这里用了一个动画函数来驱动，并使用了网上常用的easing函数来控制，避免线性的动画太死板：
new Animate({
from: 0,
to: 1,
dur: 3000+level*100,
easing: 'elasticOut',
onUpdate: function (value) {
node.setLocation('pie.location’, value);
},
}).play;
上面定义的动画，用3秒钟跑完，用'elasticOut'的easing方式。每一帧，修改node的位置信息。这样就完成了橡皮筋一样的环形弹出散开效果。
另外，导航条的出来也比较突兀，这里也使用一下动画，让它从左到右慢慢伸出：
new Animate({
from: {x:x1, y:y1},
to: {x:x2, y:y2},
delay:50,
type: 'point',
dur: 1000,
easing: 'bounceOut',
onUpdate: function (value) {
node.setCenterLocation(value.x, value.y);
和上一个动画的不同之处在于这里使用了{x、y}的point结构，每一帧直接更新节点位置。同时设置了50毫秒的delay，让动画有一点点粘性停滞，不至于太突兀。效果不错。
至此，彩虹爆炸图基本上就做的差不多了。使用起来也很简单，只要准备一些json数据就可以了，下面是一些有趣的数据做出来的效果。感兴趣的同学可以到这里索取代码。
实际应用在项目中的示意图。如果你也希望项目中用一下彩虹爆炸图，欢迎给我发邮件索取：info@servasoft.com
扫推荐微信：中国大数据
推荐理由：一手新鲜，绝对干货
代浏览器都内置了专用动画技术，Martin G?rner为您展现四种最棒的实例。
现代移动操作系统将用户接口动画化，并已达到了电脑端交互的标准——精选流畅的动画，体现出沉浸效果以及支持直观的交互。我们都想当然的认为，可以设置一个列表，使之带有运动特性，用手指轻轻一推，它就如同有重量和惯性一样运动起来，直到遇到边缘再反弹回来一点。但是，在网络上，我们还达不到这样的效果。
接受事实吧，现有网上的动画经常被视作UI灾难，还在使用二十年前陈旧的<blink>标签技术。加入Flash有点帮助，不过它缺乏HTML DOM集成，都变成了不美观的800×600分辨率，并且JavaScript DOM操作还有其标志性的5帧/秒（fps）动画率——真是绝望啊！
改变
2013年，现代浏览器内置了专用动画技术，达到60 fps。是时候去忘掉过去，开始构建美妙的UI动画体验了。我将展示四个动画技术，帮助你决定，哪一个更适合你的项目。
让我们从最简单的声明式技术开始：CSS3。这里不需要JavaScript，存CSS，加上一点现代手段。
CSS通过两种基本属性来声明动画：过渡和动画。过渡属性通知浏览器计算两种状态（由各自CSS定义）间的中间帧。动画通过改变元素CSS触发。比如，当你以编程方式改变它的层，或启动一个:hover CSS。
当缩略图层从开始转变到结束，图像则从一处平滑的移动到另一处，典型的表现为JavaScript DOM动作的结果。
img { -webkit-transition: 1s; }.begin { left: 0px; }.end { left: 500px; }
动画属性最常用于持续运行的动画特效，它还允许自定义中间步骤的动画。
创建一个旋转的图像：
img {-webkit-animation: myAnim 3s infinite; }@-webkit-keyframes myAnim{ from {-webkit-transform: rotate(0deg) } 50% {/* possible intermediate positions at any % */} to {-webkit-transform: rotate(360deg) }}
利用大量CSS属性制作动画具有无限的创造性，你可以根据意图在边框宽度内任意创建动画。 不过，大多数对动画有用的属性都是几何变换和不透明的。CSS3通过易操作的转换属性提供了全系列二维几何变换：平移、旋转、缩放和歪斜。
用旋转、缩放和歪斜创建2D转换：
webkit-transform：旋转30度
webkit-transform：缩小50%
webkit-transform：歪斜-20度，再20度
接下来变得有趣了。如果你觉得在CSS中添加3D效果，技术上是为了粗体和斜体的设计，这很愚蠢，请接着阅读。通过扩展几何转换到三维图像将是一个很自然的方式，相同变换属性还可以做平移X，Y，Z轴以及旋转X，Y，Z轴。
3D旋转图像：
webkit-transform：Y轴旋转45度
再加上点抛出动画效果，看上去就像是一个旋转的三维立方体。
如果确实这般容易的话，就不会有任何趣味性了。设计师留了一点悬念，你可以试一下，只对一个图像进行旋转，浏览器默认渲染出来的效果是不带透视性的：
webkit-transform：Y轴旋转45度
可以添加上透明属性，默认是无穷大极限值也是不带有一点透明效果的。就如同靠近镜头的对象与很远距离外的对象看上去大小一样。
为了确保图像看上去更真实，你还需要指定一个镜头与屏幕之间距离的值。加上-webkitperspective: 1000px就可以了。
要在一块平面屏幕上呈现一个3D对象，首先画出一条线连接眼镜或相机与3D物理上的点。这条线与屏幕的交集就是相应像素所在的位置。为了找到像素在屏幕上的坐标，利用泰勒斯定理，你需要空间中点的3D坐标和相机与屏幕之间的距离（f在光学中也被称为焦距）。这就是视角属性提供的距离。如果这个距离是无限远的，你可以看到所有射线（眼球到3D点线）是水平紧密状的，而且很远很远的对象在屏幕上的大小一样。
现在我们有设置一个3D立方体的所有基础了，利用六个图像以及CSS 3D转换，接下来就可以实现旋转了。
这一步很简单：我们把一个三维旋转封装到一个div，将会产生如下效果：
浏览器执行你让它所做的步骤：在div渲染一个三维立方体，然后像一张平面图片般在自身运用3D旋转。这是默认效果，虽然不是你想要的。你要告诉浏览器运用嵌套div来构成3D转换，-webkit-transform-style: preserve-3d属性。通过这个，我们就能得到想要的旋转立方体了。
很容易在空间失去定位。我的建议是采用一个div，命名为SCENE。这就是透明属性存放的位置。在内部，放置一个命名为OBJECT的div，它应当拥有transform-style: preserve-3d属性，并且该div就是你应用转换移动整个对象的地方。最后，在该div内部，使用3D转换设置你想要的正面图像，创建所需对象。在我们的例子中，立方体的六个面：
.SCENE { -webkit-perspective: 1000px; }.OBJECT{ -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(20deg rotateY(120deg) rotateZ(50deg); /* replace this with an animation property if you want movement */}.FACE1 { -webkit-transform:translateX(150px)rotateY(90deg);}...
关于3D CSS转换很棒的一点是CSS动画和过渡的完美结合。我们在这留了一个练习，让旋转立方体运动起来，当鼠标光标悬停其上时，立方体自动打开来。操作方法是：把立方体的面移动到与中心一定距离的地方。第二组CSS属性有一个 :hover选择器，将立方体的面放置在更远的距离。通过运用第一种转换属性，你将看到立方体从中心盘旋打开，同时还保持旋转（演示）。
HTML与CSS都是强大的动画技术，但缺乏绘图基元。SVG能够弥补这点，并拥有其独特的动画标签。SVG动画部分被特定称为同步多媒体集成语言（SMIL）。
首先，SVG是用于矢量基元的，比如矩形、圆形和贝塞尔曲线：
<svg> <rect x="5" y="5" width="140" height="140" stroke="#000000" strokewidth="4"fill="#AAAAFF" opacity="1"/></svg>
同样可用于：
<line x1 y1 x2 y2><circle cx cy r><path d><image x y width height xlink:href>
其中一个基元，<path>标签，是SVG中最好用的。它允许你使用直线、弧和贝塞尔曲线定义任意路径。路径定义看上去想一个字母，如同Inkscape矢量图形软件生成的。对于SVG动画，你应该理解这一点。
一个二次和三次贝塞尔曲线的例子：
<svg> <path d="M 30,240 Q 170,40 260,230" stroke="#F00" /> <path d="M 30,240 C 70,90 210,150 260,230" stroke="#F00" /></svg>
语法：
M x,y ? ? 新的起点 (标记)
L x,y ? ? ?到哪里的直线
Q cx, cy, x, y ?二次贝塞尔曲线到 (x,y)和一个控制点
C cx,cy, dx,dy, x,y 三次贝塞尔曲线到(x, y)和两个控制点
A ? ? ? 椭圆弧
z ? ? ? 字符串最后，用于结束路径
让我们把这些矢量变得更生动化。你可以查看演示，一个家伙踏着滑板翱翔于白云间。
冲浪板上下摆动，小人的嘴巴在大和更大的笑容间交替变化，眼睛滚动，瞳孔扩张。这是SVG动画四种可能的类型。
最简单的一种SVG动画运用<animate>标签，改变一种几何形状的一个参数，在本例中，就是眼睛的半径。
要使瞳孔扩张，需要改变属性列表值中的半径值。
<circle cx="200" cy="205" r="80" > <animate dur="3s" attributeName="r" values="80; 150; 80" repeatCount="indefinite" /></circle>
方便的是变化的属性还可以成为<path>标签。允许你创建一个动画路径。 唯一的限制是两个曲线之间要进行转换，必须是同一种类型且拥有相同数量的控制点。它们必须由相同位置上的同一个字母定义，唯一不同的只能是参数的改变。当移动小人的嘴巴时，只有“微笑”和“大笑”位置被定义了。SVG动画将完成插值。
<path fill="#fff"> <animate attributeName="d" dur="2s" repeatCount="indefinite" values="m 0,0 c 1,15 -13,45 -45,45 -32,0 -44,-28 -44,-44 z; m 0,0 c -4,15 -66,106 -98,106 -32,0 3,-89 9,-105 z" /></path>
当然，SVG还能进行几何变换，也能做成动画。这里的动画标签是<animate Transform>。你必须告诉它想要将哪里的转变做成动画，还要提供一个分号分隔的所有关键位置的值列表。还可以组成动画转换，你告诉浏览器使用additive=”sum” 属性。
几何转换的动画：
<g> ... <!-- SVG primitives group --> <animateTransform dur="3s" repeatCount="indefinite" additive="sum" attributeName="transform" type="translate" values="0,0; 200,-130; -100,200; 0,0" /> <animateTransform dur="3s" repeatCount="indefinite" additive="sum" attributeName="transform" type="rotate" values="0; 20; -20; 0" /></g>
第三个和最后一个SVG动画标签也很有用。<animateMotion>用来引导对象沿着特定路径运动。 它有一个隐藏的技巧称为rotate=”auto”属性。它让对象不仅能够遵循指定路径，同时自身保持朝前，如同路上行驶的车辆一样。
<g> ... <!-- SVG primitives group --> <animateMotion dur=”1s"repeatCount="indefinite" path="m 0,0 a 15,11 0 1 1 -30,0 15,11 0 1 1 30,0 z" /></g>
SMIL有大量控制动画特征。在它的JavaScript API中揭露pauseAnimations(), unpauseAnimations()和setCurrentTime(t) 函数在全局性开始/停止/暂停一个动画的功能。还在所有三种动画标签(<animate>, <animateTransform>, <animateMotion>)上指定了begin与end属性。它们可以利用一个事件节点/用户事件/动画事件的强大组合。你可以指定，动画在点击之后的一秒结束或开始。
例如，下面这个SVG按钮被点击后有一个移动的阴影效果：
<g id="buttonID"> <!-- SVG button artwork here --> <animate begin="buttonID.click" dur="1s"\ .../></g>
由声明性动画转换到编程性动画技术，<canvas>标签是你的第一选择。本文所提到的所有技术中，<canvas>标签最具有跨浏览器支持，浏览器厂商做了很多努力使之兼容60fps动画，以下是设置一个画布的方法：
<canvas width="400" height="400" style="width: 400px; height: 400px;"></canvas>
第一个尺寸（标签属性）设置了画布的分辨率，这就是你所使用的坐标空间。第二个尺寸（CSS属性）是画布出现在屏幕上的形状大小。为什么不把画布物理尺寸设置到100%分辨率，内部坐标空间不变，浏览器为任意窗口都能正确渲染图画？非常遗憾，浏览器将画布内容作为点阵图来扫描的，任何扩大范围的结果都将导致模糊混乱的像素。于是，把这两个值设置成相同的值是唯一可行的选项。
初始化画布需要JavaScript中<canvas>元素，并在其上调用getContext('2d')函数。获得的图画内容对象被用来调用到画布API。内容是状态性的，存储三种不同的状态信息：绘画风格，即时几何转换以及累计绘图路径。在画布上进行绘画的方法是发布绘图指令，不产生任何可见内容，但在内存中已创建了一个路径，然后发布一个油墨指令（ctx.stroke(), ctx.fill() 或两者皆有），就能显示出路径了。
画布动画需要设置一个动画循环，你应当基于requestAnimationFrame()函数（带有正确的前缀）。该函数使浏览器能够管理帧率，在浏览器选项卡隐藏时也能停止动画。
function runAnimation(){ yourWorld.draw() // this is your drawing code webkitRequestAnimationFrame(runAnimation);}
一般来说，画布被用于动画的时候，对象的位置必须是在逐帧的基础上才行，这是因为它们都是物理仿真的结果。观看box2dweb.js教程。仿真不断改变仿真世界中对象的位置，动画循环周期性的在屏幕上展现当前环境状态。
在画布动画中使用SVG精灵是一种很有用的技巧。一个任意复杂性的静态矢量图片在画布上呈现都是繁琐的，这样做实际上可行，虽然不如发送一个.svg到 ctx.drawImage()简单。出于模糊安全的原因，只有内联SVG支持，你必须在Blob API中使用它（代码）。
SVG精灵能够以任意比例展示其矢量美态，但遗憾的是，只支持Chrome浏览器。
WebGL暴露浏览器运行的JavaScript应用程序OpenGL API，而不需要任何插件。理论上讲，你只需要在<canvas> 元素上调用getContext(‘webgl’)（而不是之前的2d）就可以了。然而，WebGL非常大，并且API等级低。最重要的是，web版本没有默认的渲染路径，这意味着你无法给它一个形状，让它使用适合的默认值展示出来。所以你必须编写着色器，使用GLSL语言编写屏幕上出现的任何内容。
幸运的是我们有Three.js帮助。Three最初是由Mr.doob开发的库，用于一些Chrome演示（www.ro.me/www.chaostoperfection.com），但它是相对独立的。它拥有所有的基础，以及内置独特的着色器，你就可以专注于其他有用的方面：相机、灯光、行动。
首先要做的是编写Three粘合代码（很简单）：
var renderer=new THREE.WebGLRenderer({antialias: true});renderer.setSize(width, height);renderer.setClearColorHex(0x000000, 0); // color,transparency// the renderer creates a canvas elementfor youdocument.whereeveryouwant.appendChild(renderer.domElement);
在lights和action之前，需创建camera和位置：
// arguments: FOV,viewAspectRatio, zNear, zFarvar camera=new THREE.PerspectiveCamera(35,width/height, 1, 10000);camera.position.z=300;
然后是light：
var light=new THREE.DirectionalLight(0xffffff, 1);//color, intensitylight.position.set(1, 1, 0.3); // direction
我们试着呈现一个立方体吧，3D对象在Three中被称为网络，都由一个几何体和一个材料构成。
我们使用一个简单的结构：
var texture=THREE.ImageUtils.loadTexture(‘Fernando Togni.jpg’);var cube=new THREE.Mesh( new THREE.CubeGeometry(100, 100, 100), new THREE.MeshLambertMaterial({map: texture}) );
最后添加内容，称为渲染函数。
var scene=new THREE.Scene();scene.add(cube);scene.add(light);renderer.render(scene, camera);
这将为我们的立方体产生一个静态图像，为了让它动起来，我们包裹渲染召集一个动画循环，改变立方体在每一帧的位置。
function runAnimation(t){ // animate your objects depending on time cube.rotation.y=t/1000; cube.position.x=... renderer.render(scene, camera); // display requestAnimationFrame(runAnimation); // and loop}
推荐使用三维建模软件例如Sketchup。Three识别几类3D模型结构，包括COLLADA（.dae）具有广泛行业支撑。下面是如何在Three中加载一个模型：
var loader=new THREE.ColladaLoader();loader.load("Android.dae", function(collada){ var model=collada.scene; model.position=...; // x, y, z model.rotation=...; // x, y, z scene.add(model);} );
再做一些努力，更换机器人外观花式，Three提供兰伯特和冯氏照明风格，法线贴图，凹凸贴图，环境映射以及更多。
还可以使机器人运动起来，具体步骤参考教程。
原文链接：http://www.gbtags.com/gb/share/2124.htm
*请认真填写需求信息，我们会在24小时内与您取得联系。
