前言 在物联网的大趋势下,机房的设备信息以及一些环境信息变成了数据摆在了人们面前.在这个大数据的时代,数据的可视化不仅体现在数据值本身,更应该通过数据的变化来获取一些信息.我们今天的主题,机房温度云图,它通过不同的颜色来展示机房机柜温度的高低及变化,将之形象化出来,让人们更加直观的观察温度值的变化. 下图是我借助 heatmap.js 热力图和 HTML5 Canvas 实现的机房温度云图,这里只是模拟的一个温度值,相信有了更加真实的数据,它会变得更加炫丽. http://www.hightop…

前言 数据蕴藏价值,但数据的价值需要用 IT 技术去发现.探索,可视化可以帮助人更好的去分析数据,信息的质量很大程度上依赖于其呈现方式.在数据分析上,热力图无疑是一种很好的方式.在很多行业中都有着广泛的应用. 最近刚好项目中需要用到 3D 热力图的效果展示.网上搜了相关资料,发现大多数是 2D 效果或者伪 3D 的,而 3D 粒子效果对于性能上的体验不是很好,于是取巧写了个 3D 热力图的效果 . Demo : http://www.hightopo.com/demo/heatMap3D/ 部分…

之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的形式展现,各个数据之间形成的区域用不同的颜色表示,具体可以看下面的DEMO演示. 你也可以在这里查看在线演示 下面我们来简单介绍一下实现这款HTML5图表的过程以及源代码. HTML代码: <canvas id="cvs" width="600" height=&…

很多人都有这样的疑问,基于HTML5 Canvas实现的元素怎么和用户进行交互?在这里我们用到HT for Web(http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html)写了个Demo进行示例. 场景如下所示,在该场景中双击温度和湿度下的Node,会生成输入框供用户填写内容,这之后,用户按下"Enter"键可以将输入内容传到Node中,同时删除输入框,地址::http://www.hight…

ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力.—— 大数据时代,重新定义数据图表的时候到了 Architecture ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础…

基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块 前言 最近学习了 HT for Web flow 插件,除了正常的 flow 效果,其中还有两个十分好用的两个接口 getPercentPosition() 和 getPercentAngle(), 通过这两个接口可以达到很多的效果,这个 demo 我就是利用这两个接口进行对的巡逻人员的角度位置和速度进行控制. 代码实现 绘制背景色 首先结合 addBottomPainter() 在 HT 拓扑图形组件 graphView 底层上…

之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的文字动画,相当酷的动画效果. 在线预览   源码下载 实现的代码. html代码: <canvas class="canvas"></canvas> <div class="help"> ?</div> <div c…

效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素把图像转换成像素形式,这基本上是一个为canvas imageData功能的简单演示. 此脚本现存于GitHub上,您可以在那里下载到脚本和示例.在GitHub上查看像素化资源 二.选项此方法接受一个对象数组,每个对象都拥有一组选项.resolution : 渲染像素间的像素距离,必须的.shape…

今天爱编程小编给大家分享一款基于html5 canvas和js实现的水果忍者网页版. <水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版的切水果游戏由百度 JS 小组开发,采用 vml + svg 绘图,使用了 Raphael,效果很赞,赶紧来膜拜一下.效果图如下: 在线预览   源码下载 实现的代码. html代码: <canvas id="view" width="640" height=&q…

HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于HTML5 Canvas的网页画板,在这里仅对一些关键性的代码进行记录,大家也可以下载全部源代码研究. 你也可以再这里查看在线演示 下面我们来简单地分析一下实现这个HTML5网页画板的原理及代码,代码由HTML以及Javascript组成,主要还是Javascript代码. HTML代码: <div…