（圖片說明：Obelisk.js現有的全套5種原型圖形（Brick、Cube、SideY、SideX與Pyramid）以及上色後的效果，未來將會有更多的isometric原型圖加入到引擎中。）

在建立等軸圖形（Isometric Graphics）的時候，由Max Huang創作的Obelisk.js (GitHub: nosir/obelisk.js,License: MIT)是一個非常好用的JS類庫。

Obelisk.js引擎提供的API非常簡單靈活，你可以很方便的在HTML5畫布上新增上類似磚塊、立方體和金字塔這樣的isometric pixel圖形元素。Obelisk.js的線條繪圖遵循pixel neat pattern, 也就是說，線條的畫素排列嚴格使用1:2高寬比例，並使線條形成22.6度(arctan(0.5) = 26.565)的角度。

Max用Obelisk.js寫了一些非常酷的例子，比如這個從Gif轉換成isometric圖形的三個小人的動畫（連結：http://codepen.io/nosir/details/mdiHe），還有可以將任意輸入的文字轉換成isometric圖形的渲染文字功能，，還有可以將任意輸入的文字轉換成isometric圖形的渲染文字功能（連結：http://codepen.io/nosir/details/IxBJn）。

譯者注：另外JSFiddle上的這個例子也會很有助於理解（http://jsfiddle.net/nosir/ygWEW/）

（圖片說明：Isometric文字效果）

Max還寫了一些教程來指導怎樣建立立方體和其他的原型圖形。下面我們就用Obelisk.js來分步建立一個isometric pixel的立方體，也許你對這些程式碼還不能立刻想清楚，但是沒關係，只需要知道這有多麼簡單就可以了。

// 第一步，我們來建立一個isometric 3D座標軸的零點instance變數。
var point = new obelisk.Point(200, 200);

// 然後在HTML5 Canvas object中建立pixel view的instance變數，在這裡擺放所有的圖形。
var pixelView = new obelisk.PixelView(canvas, point);

// 同時建立立方體的dimension變數和上色用的color instance變數。
var dimension = new obelisk.CubeDimension(80, 100, 120);
var gray = obelisk.ColorPattern.GRAY;
var color = new obelisk.CubeColor().getByHorizontalColor(gray);

//然後把上面建立的三個變數作為引數傳遞給cube構造器，生成一個cube instance變數。
var cube = new obelisk.Cube(dimension, color, true);

// 最後一步，把cube原型渲染出來。
pixelView.renderObject(cube);
 

這樣在canvas中就可以看到它了：

現在我們可以放大瀏覽器的顯示比例，離近了仔細看一看：