TML5技术已经越来越被我们所接受，特别是一些3D的动画特效。本文介绍的8个HTML5 3D动画并没有特别华丽的界面，但是比较实用，涉及到3D图片、3D图表、3D按钮等方面，一起来看看。

1、HTML5 3D动画柱形图表

这次我们要来分享一款效果非常酷的HTML5 3D柱形图表，这款HTML5图表和之前分享的都不一样，主要是外观上比较吸引人，首先图表是3D立体的，有一种非常棒的视觉效果；其次，当鼠标划过柱形图表时，会有很不错的HTML5动画效果。

2、HTML5 3D 粒子波浪动画特效

今天我们分享一款升级版HTML5 3D粒子波浪动画特效，我们可以旋转不同的视角来欣赏粒子波浪的滚动特效。HTML5在动画制作方面的确让人眼前一亮。

3、HTML5自定义文字背景生成QQ签名档

这是一款利用HTML5实现的自定义文字背景应用，首先我们可以输入需要显示的文字，并且为该文字选择一张背景图片，背景图片就像蒙版一样覆盖在文字上。点击生成QQ签名档即可将文字背景融为一体生成另外一张图片，你也可以下载这张拥有你QQ签名档的图片。

4、HTML5坦克大战游戏简化版

今天分享的是一款简化版的HTML5坦克大战游戏，方向键控制坦克的行进方向，空格键发射子弹，命中敌方坦克后也会发出声音，效果还算可以。

5、HTML5 3D阴影文字特效

今天我们要来分享一款非常简单大气的HTML5 3D文字特效，这个3D文字特效是通过文字加粗以及文字阴影来实现的，效果非常不错。同时我们在html5tricks网站上也分享过很多炫酷的文字特效，比如CSS3文字阴影效果 阴影角度可随鼠标变化、动感的CSS3 Loading文字特效。

6、HTML5 3D衣服摆动特效 超酷HTML5 3D动画

今天向大家分享一款HTML5 3D衣服摆动动画特效，动画也是在HTML5 Canvas上完成，它模拟衣服晾在绳子上，点击鼠标可以让衣服摆动起来，就行风吹动它一样，非常逼真炫酷。

7、HTML5/CSS3一组可爱的3D按钮

这是一款利用HTML5和CSS3制作而成的按钮组合，这款CSS按钮非常具有个性化。该CSS3按钮不仅具有3D的外观，点击按钮也具有非常立体的效果，更具有特点的是这款CSS3按钮的形状是不规则的，而且按钮中都有一个可爱的小图标。

8、HTML5 Canvas 3D折线图表应用

今天我们再来讨论一下关于HTML5图表应用的问题，这款HTML5图表是基于canvas的3D折线图表，图表在初始化的时候会根据数据点把折线分割成多条线段，然后线段将逐渐悬浮到数据点对应数值的位置。由于是3D的效果，所以图表的折线也和其他折线图表的不同。

以上就是8个经典的HTML5 3D动画赏析，希望大家喜欢。

于 HTML5 的工业组态高炉炼铁 3D 大屏可视化

前言

在大数据盛行的现在，大屏数据可视化也已经成为了一个热门的话题。大屏可视化可以运用在众多领域中，比如工业互联网、医疗、交通、工业控制等等。将各项重要指标数据以图表、各种图形等形式表现在一个页面上，各种数据一目了然。随着浏览器不断发展完善，使用 Web 做大屏展示也已经不是新鲜的事了。市面上已有不少的大屏解决方案，大部分是以放各种图表的形式呈现，基本是 2D 的呈现。有些是根据投放屏幕的比例设计出来的，并不能自适应于其它的屏幕比例。最近学习了 Hightopo 的 HT for Web 产品，特有的矢量，在各种比例下不失真，加上布局机制，解决了不同屏幕比例下的展示问题，加上 3D 的呈现部分，可以做出别具一格的大屏系统。在这里与大家分享学习，先来张整体效果图：

本文主要介绍内容如下，文章中以 HT 作为 HT for Web 的简称：

1. 页面搭建
2. 数据对接
3. 动画效果实现
4. 其他细节优化

一、页面搭建

在这个系统中，我们需要创建 ht.graph.GraphView 和 ht.graph3d.Graph3dView 来呈现 2D 和 3D 的内容。设计师给到的 display.json 是 2D 图纸的内容，主要是使用矢量绘制呈现，有一些图表是用了 Echarts，HT 也有机制可以让我们使用它们。scene.json 是 3D 场景的内容，大部分模型都是通过 3dMax 建模生成的，该建模工具可以导出 obj 与 mtl 文件，在 HT 中可以通过解析 obj 与 mtl 文件来生成 3d 场景中的所有复杂模型，简单的模型也可以通过 HT 来建模。关键代码如下：

二、数据对接

页面加载出来后，就可以与后台通讯，请求相关数据对接到对应的元素上了。HT 一大强项是作为 Web 组态，所以有很友好的数据绑定方式，我们可以轻松将数据展示到各个节点上。我们这个案例采用随机数模拟的方式模拟展示数据，在 json 中对相应的节点设置唯一标识 tag，在反序列化完成后，通过 g2d.dm().getDataByTag(tag) 来获得相应节点，再根据这个节点的数据绑定来将数据展示到改节点上。

以上表格是一个用 ht 定义的矢量节点，矢量由一个个组件组成，组件不仅可以预定义的矩形，文本等内容，也可以引用其它定义好的矢量，甚至可以自定义绘制逻辑，这个表格就由此而来。矢量不仅可以用在 2D 图纸里，还可以用在 3D 贴图中，在我们 3D 场景中，以下截图的几个面板也是使用矢量实现，

HT 中数据都由 DataModel 驱动，所以 3D 对接数据也是一样的，这里就不再赘述。

三、动画效果实现

• 铁水罐车动画

这个案例中最明显的动画应该就是铁水罐车的动画了，我们先来聊聊它的实现。基本流程是这样的

如上，我们依然是在反序列化完成后，通过 car = g3d.dm().getDataByTag('car'); 得到铁水罐车的节点对象。

通过 car.s('3d.visible', true | false); 就可以控制它的显隐。

通过不断修改节点的 3D 坐标就可以实现位移效果 car.setPosition3d(x, y, z);

至于铁水罐车上的面板，也是个矢量，将它吸附于铁水罐车节点，它就会跟随车移动，不需要单独控制它的坐标来实现动画。

• 管道中气体流动动画

这部分动画效果，只要不断修改贴图的 uv 值就可以实现，以下是示例代码，node 还是由 getDataByTag 得来

总结

通过 2D 3D 结合的方式的大屏展示，可以非常直观的看到数据呈现，比如在履带出的上料数据，通过它的位置，不需要太多文字描述就知道这里是要展示什么内容。HT 非常轻量，可以结合 2D 3D 呈现数据，矢量在各种屏幕下不失真，还可以适应各种屏幕大小进行展示，用来做大屏可视化再合适不过了。除了在大屏上，电脑上可以展示良好，移动端同样支持，最后放上一张移动端的效果图。

作者：勤劳的搬运工

链接：https://juejin.im/post/5d6c57b1f265da03cd0a97ef

端数据可视化插件大盘点 图表/图谱/地图/关系图全有

在大数据时代，很多时候我们需要在网页中显示数据统计报表，从而能很直观地了解数据的走向，开发人员很多时候需要使用图表来表现一些数据。随着Web技术的发展，从传统只能依靠于flash、IE的vml，各个浏览器尚不统一的svg，到如今规范统一的canvas、svg为代表的html5技术，表现点、线、面要素的技术已经越来越规范成熟。我把前端数据可视化分为了五种：

1.图表

2.图谱

3.地图

4.关系图

5.立体图

我将按照顺序介绍62款前端可视化插件，下面就分享下34款图表插件：

1.amcharts

url： http://www.amcharts.com/

browser：IE6+、chrome、safari、firefox、opear

resume：amCharts是一种先进的图表库,将适合任何数据可视化的需要。图表解决方案包括柱、栏、线、区域,一步,一步没有冒口,平滑线,烛台,OHLC,馅饼/甜甜圈,雷达/极地,XY /分散/泡沫,子弹,漏斗/金字塔图以及指标。

2.awesomechartjs

url：http://cyberpython.github.io/AwesomeChartJS/

github：https://github.com/cyberpython/AwesomeChartJS

browser：现代浏览器

resume：AwesomeChartJS是一个简单的Javascript库,可用于创建图表基于HTML 5画布元素。

3.axiis

url：http://www.axiis.org/

browser：官方未说明

resume：Axiis框架是一个开源的数据可视化为初学者和专家开发人员设计的。

4.bonsaijs

url：http://bonsaijs.org/

github：https://github.com/uxebu/bonsai

browser：IE9+、chrome20+、safari5+、firefox18+、opear12+

resume：用于创建图形和动画的js库

5.canvasjs

url：http://canvasjs.com

browser：官方未说明

resume：一个使用HTML5、JavaScript创建图表在画布上，图表包括几个好看的主题和10倍的速度比传统的基于Flash / SVG库——导致轻量级的,美丽的和响应指示板。收费

6.canvasxpress

url：http://canvasxpress.org/

browser：Firefox 1.5+, Opera 9+, Safari 3.x+, Chrome 1.0+, IE 6+

resume：CanvasXpress是一个独立的Javascript编写的图形库，支持所有主流浏览器中计算机和移动设备。

7.chartist

url：http://gionkunz.github.io/chartist-js/

github：https://github.com/gionkunz/chartist-js

browser：Firefox, Chrome, Safari, Opera, IE9+

resume：绘制多种图形的库

8.chartjs

url：http://www.chartjs.org/

github：https://github.com/nnnick/Chart.js

browser：IE9+、chrome、safari、firefox、opear、部分支持IE7/8

resume：chartjs是一个可以绘制多种图表的库，使用了html5的canvas技术

9.chartkick

url：http://ankane.github.io/chartkick/

github：https://github.com/ankane/chartkick

browser：IE6+、chrome、safari、firefox、opear

resume：chartkick是一个依赖于ruby的绘制图表的js库，在Python中也可以使用

10.DataWrapper

url：https://datawrapper.de/

github：https://github.com/datawrapper/datawrapper

browser：支持大部分浏览器

resume：Datawrapper完全免费，开源。您可以使用他们的免费主机服务，或者安装在您自己的服务器上。Datawrapper用PHP编写，非常易于安装、修改和拓展。可以绘制。但是DataWrapper是生成图表后嵌入到站点的。

11.dataset

url：http://misoproject.com/dataset/

github：https://github.com/misoproject/dataset

browser：官方未说明

resume：dataset是一个JavaScript客户端数据转换和管理库。数据集管理客户端数据简单处理加载、解析、排序、查询和操纵来自各种数据源的数据。

12.dc

url：http://dc-js.github.io/dc.js/

github：https://github.com/dc-js/dc.js

browser：官方未说明

resume：专门为探索大型、多维数据集而进行优化的库

13.dygraphs

url：http://dygraphs.com/

browser：IE8+、chrome、safari、firefox、opear

resume：dygraphs是一种快速、灵活的开源JavaScript库图表。

14.echart

url：http://echarts.baidu.com/index.html

github：https://github.com/ecomfe/echarts

browser：IE9+、chrome、safari、firefox、opear

resume：基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

15.flotr2

url：http://www.humblesoftware.com/flotr2/

github：https://github.com/HumbleSoftware/Flotr2

browser：FF, Chrome, IE6+, Android, iOS

resume：Flotr2是HTML5画图表和图形库。可以绘制线图、条图、蜡状图、饼图、气泡图

16.Flot

url：http://www.flotcharts.org/

browser：Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+

resume：一个基于jQuery的绘图库，可以绘制折线、散点、条形、饼状图

17.fusioncharts

url：http://www.fusioncharts.com/

browser：IE6+、chrome、safari、firefox、opear

resume：一个专门用来绘制图表的库，可以绘制90多种图表，但是收费

18.graphael

url：http://g.raphaeljs.com/

browser：Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+

resume：可以绘制各种图表的插件，而且非常简单灵活

19.highchart

url：http://www.highcharts.com/

github：https://github.com/highslide-software/highcharts.com/

browser：支持各种设备，ie6+

resume：在高版本浏览器中使用SVG，而在旧版本IE(包括IE6及更新版本)中使用后备的VML。有自己的团队负责，但是只对非商业用途免费，可以绘制 line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types

20.humble Finance

url：http://www.humblesoftware.com/finance/index

browser：FireFox, Safari, Chromium, or IE6+

resume：HumbleFinance是一个HTML5数据可视化工具类似于Flash工具，完全是用JavaScript编写的工具使用原型和Flotr库。

21.ichartjs

url：http://www.ichartjs.com/

github：https://github.com/wanghetommy/ichartjs

browser：IE9+、chrome、safari、firefox、opear

resume：ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。

22.icharts

url：http://www.icharts.net/

browser：官方未说明

resume：iCharts免费版本提供了一些基本的交互式图表样式，如果更使用高级的样式，则需要购买高级版本。

23.JavaScript InfoVis Toolkit

url：http://philogb.github.io/jit/

github：https://github.com/philogb/jit

browser：官方未给出具体版本

resume：JavaScript InfoVis Toolkit可以动态绘制各种图形，提供了一些预设的样式可用于展示不同的数据

24.jqplot

url：http://www.jqplot.com/

browser：IE 7+, Firefox, Safari, and Opera

resume：基于jQuery的绘图插件，可以绘制折线、条形、散点、饼状图

25.jscharts

url：http://www.jscharts.com/

browser：Firefox 1.5 +，Chrome 10 +，Internet Explorer 8 +，Safari 3.1 +，Opera 9 +

resume：jscharts是一个基于JavaScript的图表生成器,需要很少或根本没有编码。jscharts绘制图表是一个简单和容易的任务,因为您只需要使用客户端脚本(即由web浏览器)。不需要额外的插件或服务器模块。就包括我们的脚本,准备你的图表数据XML、JSON或JavaScript数组和你的表已经准备好了!允许您创建图柱状图,饼图或简单的线条图。收费但是有免费版本。

26.kendo-ui

url：http://www.telerik.com/kendo-ui

github：https://github.com/telerik/kendo-ui-core

browser：现代浏览器

resume：http://www.cnblogs.com/xiyangbaixue/p/3951297.html

27.nvd3

url：http://nvd3.org/

github：https://github.com/novus/nvd3

browser：Chrome,Firefox, Opera, Safari and Internet Explorer 10

resume：d3图表库

28.pizza-pie-charts

url：http://zurb.com/playground/pizza-pie-charts

github：https://github.com/zurb/pizza

browser：官方未说明

resume：主要用来生成饼状图的库

29.protovis

url：http://mbostock.github.io/protovis/

github：https://github.com/mbostock/protovis

browser：现代浏览器

resume：Protovis组成自定义视图的数据用简单的标志如酒吧和点。与低级图形库,迅速成为可视化乏味,Protovis定义是通过编码数据的动态属性,允许继承,尺度和layoutsto简化施工。

30.Peity

url：http://benpickles.github.io/peity/

browser：Chrome, Firefox, IE9+, Opera, Safari

resume：可以绘制多种图形，但是都是很小的图形，与jQuery Sparklines相似

31.rgraph

url：http://www.rgraph.net/

browser：现代浏览器

resume：RGraph是一个基于HTML5的开放web图表和图表库。RGraph创建这些图表在web浏览器使用JavaScript,这意味着更快的页面和web服务器负载,导致较小的页面大小和更快的网站。

32.webfx

url：http://webfx.eae.net/

browser：Firefox 1.5, Opera 9 and Internet Explorer 6

resume：支持多种图表的库

33.xcharts

url：http://tenxer.github.io/xcharts/

github：https://github.com/tenXer/xcharts/

browser：现代浏览器

resume：xCharts美丽是一个JavaScript库,用于构建和自定义数据驱动的web使用D3.js图表可视化。使用HTML、CSS和SVG,xCharts被设计成动态、流体、集成和定制。

34.zingchart

url：http://www.zingchart.com/

browser：官方未声明

resume：ZingChart创造惊人的可视化提供了灵活性和资源。提供超过100个图表类型，独特的特性,如缩放和交互式。

小结：

每款插件各有千秋，根据项目需求挑选不同插件。其中比较广泛使用的如echart(百度产品)、highchart等，下面我将分享图谱插件。

9款图谱插件：

1.crossfilter

url：http://square.github.io/crossfilter/

github：https://github.com/square/crossfilter

browser：官方未说明

resume：一个可以操作大型、多元数据集的库，帮助数据分析。

2.d3js

url：http://d3js.org/

github：https://github.com/mbostock/d3

browser：Firefox, Chrome, Safari, Opera, IE9+

resume：D3.js是一个JavaScript库,基于数据操作文档。D3可以帮助你把数据使用HTML、SVG和CSS。D3强调web标准给你完整的现代浏览器的功能没有把自己和一个专有的框架,结合强大的可视化组件和DOM操作的数据驱动的方法。

3.envisionjs

url：http://www.humblesoftware.com/envision/index

github：https://github.com/HumbleSoftware/envisionjs

browser：IE6+、chrome、safari、firefox、opear

resume：envisionjs是一个库来创建快速、动态和交互式可视化的图表

4.jsxgraph

url：http://jsxgraph.uni-bayreuth.de/wp/

github：https://github.com/jsxgraph/jsxgraph

browser：现代浏览器

resume：JSXGraph交互式几何是一个跨浏览器的库,函数绘图,图表和数据可视化在web浏览器中。它完全实现在JavaScript中,不依赖于任何其他库,并使用SVG VML或画布上。

5.paperjs

url：http://paperjs.org/

github：https://github.com/paperjs/paper.js

browser：IE9+,chrome,firefox

resume：paperjs是一款不可多得的js插件，可以绘制各种动态图形效果

6.processingjs

url：http://processingjs.org/

github：https://github.com/processing-js/processing-js/

browser：现代浏览器

resume：processingjs是用Java编写的，所以图形在网页上显示要靠Java程序，使用canvas技术

7.Raphaël

url：http://raphaeljs.com/

github：

browser：Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

resume：Raphaël是一款绘制矢量图的插件，支持低版本的浏览器

8.sparklines

url：http://omnipotent.net/jquery.sparkline/#s-about

github：

browser：Firefox 2+, Safari 3+, Opera 9, Chrome and Internet Explorer 6+，ios和andriod设备

resume：使用内嵌在HTML中的数据或通过javascript直接生成微线图(小内联图表)，最主要的特点是可以生成波形图。

9.tangle

url：http://worrydream.com/Tangle/

github：

browser：

resume：Tangle是一个JavaScript库,用于创建活性文档。读者可以交互式地探索可能性,玩参数,并立即看到文档更新。Tangle是超级简单,容易学习。

小结：后面将分享6款地图插件。

6款地图插件:

1.Kartograph

url：http://kartograph.org/

github：https://github.com/kartograph/kartograph.py

browser：Internet Explorer 7+，chrome，Firefox

resume：Gregor Aisch开发的一个基于JavaScript和Python的非常炫的、完全使用矢量的库。

2.leafletjs

url：http://leafletjs.com/

github：https://github.com/Leaflet/Leaflet

browser：Chrome，Firefox，Safari 5+，Opera 12+，IE 7–11

resume：leafletjs是一个开源的支持移动端的地图插件，js文件仅仅有33kb，

3.Modest Maps

url：http://modestmaps.com/

github：https://github.com/modestmaps/modestmaps-js

browser：Firefox, Chrome, Opera, iOS, Android, and Internet Explorer 7-9.

resume：Modest Maps支持各种设备，也有很多版本。虽然是一款老的地图插件，但是非常小、可扩展而且免费

4.polymaps

url：http://polymaps.org/

github：https://github.com/simplegeo/polymaps

browser：现代浏览器

resume：Polymaps依赖于SVG，因此在较新的浏览器中表现很好。

5.imagemapster

url：http://www.outsharked.com/imagemapster/

browser：Firefox, Chrome, Safari, Opera, IE6+

resume：ImageMapster是一个jQuery插件,它使你的HTML图片像Flash一样炫

6.datavlab

url：http://datavlab.org/

github：https://github.com/TBEDP/datavjs

browser：IE6+、chrome、safari、firefox、opear

resume：datav.js是为了降低日常对于可视化方法使用的成本，用数据可视化的方法帮助到更多的人。

现在来分享9款关系图插件:

1.arborjs

url：http://arborjs.org/halfviz/#/a-new-hope

github：https://github.com/samizdatco/arbor

browser：IE6+,chrome,firefox

resume：基于jQuery的图谱可视化库，对于高版本的浏览器这个库使用了HTML的canvas元素

2.cubism

url：http://square.github.io/cubism/

github：https://github.com/square/cubism

browser：官方未说明

resume：时间序列数据可视化的D3插件

3.gantti

url：http://bastianallgeier.com/gantti/

github：https://github.com/bastianallgeier/gantti

browser：IE7+、chrome、safari、firefox、opear

resume：是一款PHP的前端数据展示插件

4.getspringy

url：http://getspringy.com/

github：https://github.com/dhotson/springy/

browser：官方未说明

resume：Springy是一个使用JavaScirpt实现的有向图布局算法，使用了真实世界中的一些物理原理，你可以随意拖动图表中的元素。

5.graphdracula

url：http://www.graphdracula.net/

github：https://github.com/strathausen/dracula

browser：官方未说明

resume：graphdracula是一组工具来显示和布局互动图表,以及各种相关算法。

6.sigamajs

url：http://sigmajs.org/

github：https://github.com/jacomyal/sigma.js

browser：IE9+,chrome,firefox

resume：一个非常轻量级的图谱可视化库。Sigma.js很漂亮，速度也快。

7.smoothiecharts

url：http://smoothiecharts.org/

github：https://github.com/joewalnes/smoothie/

browser：IE7+、chrome、safari、firefox、opear

resume：smoothiecharts是一个非常小的图表库为实时流媒体数据而设计的

8.timeplot

url：http://www.simile-widgets.org/timeplot/

github：

browser：官方未说明

resume：Timeplot是基于dhtml AJAXy部件绘图时间序列和覆盖基于时间的事件

9.visjs

url：http://visjs.org/

github：https://github.com/almende/vis/

browser：Chrome, Firefox, Opera, Safari, IE9+

resume：Vis.js是一个动态的、基于浏览器可视化库。库被设计成易于使用,处理大量的动态数据,使操作和交互的数据。时间表,包括组件库数据集网络、Graph2d,Graph3d。

End. 作者：夕阳白雪 via：36大数据 感谢！