之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元--叶轮旋转. 先看看最后我们实现的效果:http://www.hightopo.com/demo/fan/index.html 我们先来看下这个叶轮模型长什么样 从模型上看,这个叶轮模型有三个叶片,每一个叶片都是不规则图形,显然无法用上我们HT for Web的基础图形来拼接,那么我们该怎么做呢?很简单,在HT for Web中提供了自定义图形的方案,我们可以通过自定义图形来绘制像叶片这种不规则图形. 在绘制叶片之前,我们…

突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码能实现这种效果我觉得还是牛的. demo地址: http://www.hightopo.com/demo/Wall3D/index.html 先来看看效果图: 这个例子最基础的就是最外层的盒子了,所以我们先来看看如何实现它: var box = new ht.CSGBox(); dataModel.…

在电力.油田燃气.供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex.Silverlight甚至Applet这样的重客户端方案,在HTML5流行前VML和SVG算是真正纯种Web方案也是有不少应用,近些年随着HTML5的流行,加上移动终端对HTML5支持的普及,越来越多新项目开始采用真正纯HTML5的方案,更具体的说大数据量应用性能高于SVG的Canvas方案,已经逐渐成为当今Web SCADA前端技术的首选标配方案. htt…

前言 工业物联网在中国的发展如火如荼,网络基础设施建设,以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇.中国工业物联网企业目前呈现两种发展形式并存状况:一方面是大型通讯.IT企业的布局:一方面是传统工业软件和工业网络企业自发地延伸,由产品提供商发展为方案供应商.什么叫做裙房?裙房是指附属于主高楼并与之连成一体的低层建筑.本文的 Demo 是针对于裙房做的,但是在工业监控系统中有很多雷同的部分,比如动画.点击切换.点击隐藏.故障展示.开关.数据展示等等,都是比较通用的一些功能.所以针对这…

昨天看到一篇文章说是学习如何开飞机的,然后我就想,如果我也可以开飞机那就好玩了,每个人小时候都想做飞行员!中国飞行员太难当了,再说也不轻易让你开飞机!后来我就想如果能用 HT 开飞机那就是真的有趣了,哈哈,这个实现的效果还是很不错的,可以让你满足一下开飞机的虚荣心 Demo 地址: http://hightopo.com/guide/guide/plugin/obj/examples/example_path.html 来看下具体实现的效果: 这个例子基本上完全模拟了飞机的飞行模式,包括起飞跑道…

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

效果请点击下面网址: 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…

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

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