最近搞个游戏遇到最短路径的常规游戏问题，正巧看到老同事写的3D机房最短路径巡线文章，一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现，算法基于开源 https://github.com/bgrins/javascript-astar 的javascript实现，其实作者也有个不错的2D例子实现 http://www.briangrinstead.com/files/astar/ ，只不过觉得所有A*算法的可视化实现都是平面的不够酷，另外还有不少参数需要调节控制，还是值得好好搞个全面的Demo，先上张2D和3D例子的对照图。
实现代码比较容易一百多行，不[……]
上篇采用了HTML5的Canvas的globalCompositeOperation属性达到了染色效果，其实CSS也提供了一些常规图像变化的设置参数，关于CSS的过滤器Filter设置可参考 http://www.html5rocks.com/en/tutorials/filters/understanding-css/，CSS的设置的确很方便，不需要我们了解底层实现逻辑，仅需要提供简单的设置参数值即可，但这样的方式毕竟无法达到随心所欲变化的效果，这有点想OpenGL早期只能通过Fixed Function Pipeline进行开发，和如今采用Shading Language可实现丰富多彩变化[……]
上篇介绍了HT for Web采用HTML5 Canvas的getImageData和setImageData函数，通过颜色乘积实现的染色效果，本文将再次介绍另一种更为高效的实现方式，当然要实现的功能效果是完全一样的。这次我们依然基于HTML5技术，但采用Canvas的globalCompositeOperation属性进行各种blending效果：
各种globalCompositeOperation效果可参考https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing 的说明，[……]
HT for Web独创的矢量图片设计架构，使其具有强大丰富的动态图形呈现能力，但从最近知乎热议的“Adobe Photoshop 是否已经过时？”的话题，大家能体会到很多情况下实际项目不可能完全采用矢量，项目中还是有大量的传统非矢量的静态图片，毕竟工具强大且现有资源丰富，但为了使静态图片呈现出更多的动态效果，HT for Web提供了较多渲染方式，例如对HT for Web的图元设置‘body.color’的style后图元即可达到自动染色的效果，这里将对这种染色技术进行讲解。
上图呈现了本文例子最终的呈现效果，中间为原始图片是http://hightopo.com/image[……]
HTML5已经足够强大，但很多应用还是需要独立桌面客户端的解决方案，毕竟能操作本地文件等功能还是很多工具类软件短期内无法完全采用云方案替代。
最近Adobe发布的http://brackets.io也是类似的应用，Brackets这样描述自己：An open source code editor for the web, written in JavaScript, HTML and CSS. 这样的描述在过去很难想象居然是编辑器的工具，如今采用WebKit嵌套各种壳的方案已让这类应用成为主流。
Adobe的Brackets采用的是自家的https://github.com[……]
在《HT图形组件设计之道（二）》我们展示了HT在2D图形矢量的数据绑定功能，这种机制不仅可用于2D图形，HT的通用组件甚至3D引擎都具备这种数据绑定机制，此篇我们将构建一个3D飞机模型，展示如果将数据绑定机制运用于3D模型，同时会运用到HT的动画机制，以及OBJ 3D模型加载等技术细节，正巧赶上刚发布的iOS8我们终于能将基于HT for Web开发的HTML5 3D应用跑在iOS系统了。
首选我们需要一个飞机模型，采用HT for Web构建3D模型可采用API组合各种基础模型的方式，但今天我们将采用读入OBJ的方式，毕竟网上已有很多不错的现成模型素材，搜查了一番后我在www.[……]
今天iOS8终于正式发布，升级手头设备后对我来说第一件事自然是测试HT for Web 3D在iOS8下运行的效果，跑了多个HT for Web的3D例子都非常流畅。 以下是跑HT for Web的3D网络空间拓扑图在iOS8上的截图和视频操作效果，自然不如PC上流畅，但iOS8第一步就能让WebGL达到这样的效果和性能我已知足！
Heatmap热图通过众多数据点信息，汇聚成直观可视化颜色效果，热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业，甚至应用于竞技体育领域的数据分析。
已有众多文章分享了生成Heatmap热图原理，可参考《How to make heat maps》和《How to make heat maps in Flex》，本文将介绍基于HTML5技术的实现方式，主要基于Cavans和WebGL这两种HTML5的2D和3D技术的应用，先上最终例子实现的界面效果和操作视频：
实现Heatmap的开源js库比较出名的就是 heatmapjs ，该框架发展了2年多，作者P[……]
上篇我们通过定制了CPU和内存展示界面，体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动，这类案例后续文章还会继续以便大家掌握更多的矢量应用场景，本篇我们先切换个话题，谈谈模型-视图-事件之间的关系。
图形组件设计架构上主要就是在规划Data模型，View视图和Event事件之间的关系，这些年业界逐渐将各种GUI设计模式提炼成理论归类，MVC、MVP和MVVM的主要大类常被统称为MV*，有很多文章进行各种设计模式的定义和比较，本篇不打算深入展开理论的讨论，不同图形组件设计架构都会有很多差异，持续发展的组件其实每时每刻都在进行着各种设计上的改进，相信有很多不[……]
上一篇我们自定义CPU和内存的展示界面效果，这篇我们将继续采用HT完成一个新任务：实现一个能进行展开和合并切换动作的刀闸控件。对于电力SCADA和工业控制等领域的人机交互界面常需要预定义一堆的行业标准控件，以便用户能做可视化编辑器里，通过拖拽方式快速搭建具体电力网络或工控环境的场景，并设置好设备对应后台编号等参数信息，将拓扑图形与图元信息一并保存到后台，实际运行环境中将打开编辑好的网络拓扑图信息，连接后台实时数据库，接下来就是接受实时数据库发送过来的采集信息进行界面实时动态刷新，包括用户通过客户端对设备进行的各种下发遥控等操作，发送到后台最终实现对硬件设备的控制，这个过程就是典型的实时监控系统[……]
![http://hightopo.com/image[……]](http://hightopo.com/images/banner.png){kind=link}