发布时间：2014-11-25 21:35:09

Box2D最早是Erin Catto在GDC大会上的一个展示例子，后来不断完善成C++的开源物理引擎库，这些年了衍生出Java、ActionScript以及JS等版本，被广泛应用在游戏领域。说其丰富的确很丰富，说乱也够乱的，找个Box2D的JS版就有N多选择，而且不同版本API还有差异，可参考这里的对比 http://stackoverflow.com/questions/7628078/which-box2d-javascript-library-should-i-use
虽然版本较多有点乱，但各个版本的基本原理和API都类似，以下为我基于Box2DJS融合HT for Web写的例子代码。Box2D有很多参数功能点，这里例子我们仅呈现最基础简单的要素，主要让大家理解Box2DJS引擎的基本使用，以及呈现上如何与HT for Web结合。......【阅读全文】

发布时间：2014-11-23 19:24:03

上篇采用了HTML5的Canvas的globalCompositeOperation属性达到了染色效果，其实CSS也提供了一些常规图像变化的设置参数，关于CSS的过滤器Filter设置可参考 http://www.html5rocks.com/en/tutorials/filters/understanding-css/，CSS的设置的确很方便，不需要我们了解底层实现逻辑，仅需要提供简单的设置参数值即可，但这样的方式毕竟无法达到随心所欲变化的效果，这有点想OpenGL早期只能通过Fixed Function Pipeline进行开发，和如今采用Shading Language可实现丰富多彩变化的质变，因此这篇我们将采用WebGL的SL代码方式折腾点更好玩的效果。......【阅读全文】

发布时间：2014-11-22 22:32:07

我在mac air的chrome浏览器下测试了以上代码，createColorImage1需要1630毫秒，createColorImage2需要29毫秒，两者相差56倍，也就是说采用globalCompositeOperation虽然进行了两次drawImage，但性能依然远高于通过getImageData逐个设置像素值的方式。
造成这种巨大差距的根本原因在于createColorImage1的方式完全基于CPU运算，js本就单线程，且密集数值运算也不是js的强项，而采用globalCompositeOperation的渲染方式，浏览器底层完全可以采用GPU等硬件加速的方式达到更加的性能，因此两钟方式性能差异几十倍也不足为奇了，有兴趣可参考微软的几篇关于浏览器Canvas硬件加速相关的文章：......【阅读全文】

发布时间：2014-11-22 21:01:23

HT for Web独创的矢量图片设计架构，使其具有强大丰富的动态图形呈现能力，但从最近知乎热议的“Adobe Photoshop 是否已经过时？”的话题，大家能体会到很多情况下实际项目不可能完全采用矢量，项目中还是有大量的传统非矢量的静态图片，毕竟工具强大且现有资源丰富，但为了使静态图片呈现出更多的动态效果，HT for Web提供了较多渲染方式，例如对HT for Web的图元设置‘body.color’的style后图元即可达到自动染色的效果，这里将对这种染色技术进行讲解。......【阅读全文】

发布时间：2014-11-14 11:04:31

HTML5通过WebKit嵌入打包成本地应用已经不是新鲜事了，整个世界的各种客户端技术正在变得更加融合，无数种千奇百怪的客户端方案正在改变很多观点和架构，不久前的wwdc2014中的JavaScript for Automation我觉得是被严重忽略的亮点，整个mac osx系统和应用程序都可通过JavaScrpit进行调用，早期window得利于众多应用软件而普及，苹果在站稳了移动终端后，借助诸如JavaScript for Automation的动作吸引更多专业客户端开发者，也许会不知不觉在桌面领域翻盘。......【阅读全文】