作为一个混迹互联网的 IT 人士，如果想各方面都了解点得话，那么设计 gif 动画也是个不错的学习方向哦！

下面就 step by step 教大家如何设计一个 loading.gif 的加载动画图：

先看效果图：

【场景】：

由于 CodeTank 是一个 JS 的编程游戏，所以用户的代码都可以在 CodeTank 平台上执行，从而控制 tank 的个性化行为。

在 CodeTank 设计之初，主要需要实现的目标如下：

1. 自定义的坦克可以调用公用的 API，例如 fire，ahead 等控制坦克行为的 API。
2. 自定义的坦克可以实现自己的事件处理程序，在特定事件触发时提供自己的响应。
3. 自定义坦克管理属于自己的状态队列。

Webtop——html5 桌面 app 开发引擎。基于 webtop，你可以使用 html5 和 css3 等新技术构建桌面 app，即开发直接运行于 windows 上的软件，使用透明渲染模式能将网页直接渲染在桌面上，轻松实现透明阴影等特效。而且，提供了大量的本地 api，使你的 app 能达到跟本地 app 一样的体验。基于它，你可以开发诸如浏览器，QQ，PS，桌面 widget 等桌面 app。这种开发软件的方式，相比传统桌面软件开发方式的开发效率，个人认为至少是其的 10 倍。

• 官网：http://webtop.alloyteam.com
• 下载地址：http://download.alloyteam.com/webtop.zip
• 官方群：257960168

什么是 JX 框架

第一个程序

Javascript 里的数组对象构建自 Array 构造器. 比如:
var ary = new Array(1, 2, 3 ) 或者 var ary = [ 1, 2, 3 ]

在 java 里, 数组会按照索引连续分配有序个元素.
而在 javascript 里, 数组的存取方式跟普通对象一模一样.

一、坦克结构组成：

坦克由三个基本部件组成：主体，炮管和雷达。

1. 主体：可进行移动或旋转动作。
2. 炮管：可进行旋转和开火动作，开火可控制子弹的能量范围。
3. 雷达：可进行旋转和探测敌人的动作。当坦克停止移动时，雷达会被关闭，玩家可以通过手动调用 scan方法开启雷达。

欢迎来到 CodeTank 的世界，将会带你进入一个神奇而充满挑战的代码机器人的世界！

CodeTank（代码坦克）是全世界首个 Javascript 程序员的在线编程对战游戏，是由 腾讯 AlloyTeam 和 HTML5 梦工场联合出品的在线坦克仿真游戏平台，CodeTank 采用 HTML5、Javascript、CSS3、NodeJS、MongoDB 等全新 Web 技术来构建一个基于互联网的在线智能坦克机器人战斗仿真引擎（所以需要支持 HTML5 的浏览器来运行）。

欢迎来到 CodeTank 的世界，将会带你进入一个神奇和充满挑战的代码机器人的世界！

相信每一个男人的心中，都有一份对坦克 (Tank) 特殊的情结，那就访问：

CodeTank 官方网站：http://CodeTank.AlloyTeam.com/

在 javascript 中, 一个原生的 json 对象实际上就是一个单例. 我们现在讨论另外一种.

假设现在在写一个小功能, 点击按钮的时候需要弹出一个遮罩层.

但是这个遮罩层是全局唯一的, 不可能同时在页面出现 2 个. 这样写的话每次都会创建一个新的 div. 显然是浪费资源

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

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

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

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

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