我们在做一些图像变换或者 3D 建模时，骨架或者网格的 “蒙皮” 是少不了的。

在 webGL 中，也就是 “experimental-webgl” 的 context 中，webGL 跟 openGL 一样，提供了一个非常方便的

接口，可以很容易的对某一个指定的面或者网格蒙上指定的素材。并且，被蒙皮的区域做矢量变换，3d rotate 之类的，texture 会自动随着变换。不用额外的做处理。所以在 webGL 中，textureMapping 是十分容易和方便的。

这里有个简单的 demo，支持 webGL 的浏览器可以尝试围观下。

当然，从文章的标题可以看出，我们今天要讨论的内容并不是 webGL 下的 bindTexture。而是在 2D 的 context 下怎么对素材进行 TextureMapping？

关于 Canvas 中动画的处理和实现

大致会有三种类型：

• 矢量动画【No Textures】
• 关键帧动画
• 骨骼动画

业余时间做一些感兴趣的事情，积累了好多 test cases，其中有一些还是蛮有趣的，于是集中整理了一部分出来，其中有一些复刻的创意，有一些自己的 idea，也有一些是纯粹做测试用的，敬请围观。一期先传 40 个，持续更新 (^^)

对于 Web 前端的开发而言，为了降低文件大小，js 文件和 css 文件的压缩和组合几乎是默认的规矩。

我们利用 YUI Compressor 和 google Compiler 可以很容易的完成文件的压缩。 甚至 yui compressor 本身都已经支持 多文件的批量压缩。

以技术预研的心态做的一个东东。基于【双密度松弛算法】

目前来看应用价值不大，更多的是扩展一些思路，扩大前端方向，或者说是 js 能做的事的范围。大家路过围观一下就好。

源码不多，托管在 github/hongru/fluid 上，感兴趣的可以大致看一看。

废话不多说，直接进入正题，这篇文章主要为大家讲解一下一个类似【Z-Type】的 html5 小游戏的开发思路。

【Z-Type】不知大家是否有玩过，Impactjs 的一个演示 demo。一个需要 99$的 html5 游戏框架。咱们暂且先不管他实现的思路，以下我们按自己的思路来一步步实现。

以下实例基于 AlloyTeam 团队游戏底层库 【Laro】 实现.

【演示 Demo】 （Firefox3.4+，Chrome10+，safari10+ 测试通过）

每个人在工作中成长，职业化都是一个必经之路。

这是一个渗透进细节和个人工作习惯之中的一个问题，不积跬步，无以至千里，不积小流，无以成江海。关于职业化行为以及怎么来职业化，做了一些思考，希望能沉淀下来，勉励自己，也和大家共勉。

好久没有更新 blog 了。今天终于有了心再写一篇。算是对自己工作和生活的一种回顾吧。

11 年底和 12 年初的时候自己都没有写什么总结性质的博文，或者之类的东西。但是心里确是有稍微对过去的时间做一点结算工作的。

飞行射击类游戏很常用的追踪子弹，或者塔防里面固定炮台打 怪物的时候，为了保证子弹不会打空，追踪是必要的。
然而，这是极其简单的事情。
在每一帧里判断当前子弹和目标位置的距离和方向，不断修正 速度方向即可。

我们的图片大部分都是可以转换成 base64 编码的 data：image。 这个在将 canvas 保存为 img 的时候尤其有用。虽然除 ie 外，大部分现代浏览器都已经支持原生的基于 base64 的 encode 和 decode，例如 btoa 和 atob。（将 canvas 画布保存成 img 并强制改变 mimetype 进行下载，会在下一篇记录）

但是处于好奇心，还是驱使我去了解下 base64 编码的原理。以便也在不支持原生 base64 编码的 ie 下可以得以实现。