发布时间：2015-03-06 01:29:08

HT For Web 的HTML5拓扑图组件graphView背景设置有多种途径可选择：
divBackground：通过css设置graphView对应的div背景
Painter：通过graphView.addBottomPainter(function(g, rect){…})来绘制背景
Layer：通过设置graphView.setLayer(['…', '…', '…', …])来将graphView拆分为多个图层，并为各个图层命名，再让不同种类的node通过node.setLayer('…')将node设置到graphView对应图层中......【阅读全文】

发布时间：2015-02-01 15:32:16

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让Canvas可享用到现有丰富的SVG素材，并不失SVG矢量无级缩放的特点。
《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果，但你也可以直接拖拽SVG格式的图片进行显示，只不过普通图片的格式数据为data:image/png类型，而SVG格式的数据类型为data:image/svg+xml的类型，下图为该HT for Web拓扑图拖拽入SVG格式图片的运行效果：......【阅读全文】

发布时间：2015-01-12 19:06:18

在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏。

汉诺塔的游戏规则及递归算法分析请参考http://en.wikipedia.org/wiki/Tower_of_Hanoi。

知道了汉诺塔的规则和算法，现在就开始创建元素。用HT for Web（http://www.hightopo.com）现有的3D模板创建底盘和3根柱子不是问题，问题是要创建若干个中空的圆盘。一开始的想法是：创建一个圆柱体，将圆柱体的上下两端隐藏，设置柱面的宽度来实现圆盘的效果，经过多次尝试并查阅相关api文档，发现柱面是没有厚度的，改方法不可行。

后来在HT for Web自定义3D模型的WebGL应用（http://www.hightopo.com/blog/381.html）受到启发，圆盘的形成就是在xy平面上的一个矩形，根据y轴旋转一周产生的，通过查阅相关文档，最总决定采用ht.Default.createRingModel方法来创建圆盘模型，然后在创建node的时候通过shape3d属性引用创建好的模型。......【阅读全文】

发布时间：2014-12-31 21:20:52

今天是2014年的最后一天，这个时刻总会让人想起时钟，再过几个小时地球人都要再老了一岁，于是搞个HTML5版的时钟就是我们今天要完成的任务，实现HTML5的时钟绘制一般会采用三种方式，第一种采用CSS的实现方式，例如 http://www.css-tricks.com/examples/CSS3Clock/ ；第二种采用SVG的实现方式，例如 http://www.css-tricks.com/examples/CSS3Clock/；第三种采用Cavnas的2D绘制方式，如HT for Web中《矢量手册》中自定义绘制的clock例子。

以上三种方式都是较容易理解的实现方式，今天我们将采用的则是较为少见的WebGL纯Shading Language实现方式，这种方式极其高效，毕竟我们采用的是可利用GPU硬件加速的WebGL技术，CPU代码角度看仅有两个三角形的绘制，真正表盘的绘制逻辑完全在GPU对两个三角形进行Fragment Shading时实现。......【阅读全文】

发布时间：2014-12-28 21:07:54

HTML5版的String Avoider小游戏 http://www.newgrounds.com/portal/view/300760 蛮简单也蛮考验耐心，从游戏起始点移动鼠标到终点位置，鼠标移动过程绘制出移动轨迹的String平滑曲线，整个过程不能碰撞到边界，从技术角度来说其核心就是根据鼠标移动位置生成String线的算法，该游戏是ActionScript写的Flash版，这里将其改造成HTML5版的JavaScript实现，并增加可自定义关卡功能的一种设计思路。......【阅读全文】