Obelisk.js：使用HTML5画布构建像素等距图形

使用提供的简单灵活的API，您可以轻松地在HTML5画布中添加等距像素元素，例如砖块，立方体，金字塔和坡度。 Obelisk.js严格遵循像素整齐的模式：具有1：2像素点排列的线，导致22.6度的角度。

另外，您应该知道obelisk.js不适用于矢量等距图形的绘制和渲染。在内部，它不使用任何画布图形绘图API，而是在像素级别上操纵所有渲染以获取精确的像素排列。只需尝试将像素化即可。玩得开心。

最新版本以CommonJS风格编写，这意味着您可以轻松地在browserify项目中使用它。在这里查看详细信息

//为像素视图世界创建一个画布2D点var point = new obelisk。点（200，200）; //创建视图实例以嵌套所有内容//画布可以是DOM或jQuery元素var pixelView = new obelisk。 PixelView（画布，点）; //创建立方体尺寸和颜色实例var Dimensions =新方尖碑。 CubeDimension（80，100，120）; var gray =方尖碑。 ColorPattern。灰色; var color =新方尖碑。 CubeColor（）。 getByHorizo​​ntalColor（灰色）; //用尺寸和颜色实例构建多维数据集var cube = new obelisk。立方体（尺寸，颜色，真）; //将多维数据集基元渲染到视图pixelView中。 renderObject（立方体）;

有关更多详细信息，请查看教程第1部分：要构建第一个多维数据集，或自己尝试代码

由于node.js画布依赖项可能很难安装（对Cairo的二进制依赖项），因此我们不将其添加为项目依赖项。您将需要在项目上显式添加canvas依赖项：

//加载Node Canvas依赖项var Canvas = require（＆＃39; canvas＆＃39;）; //加载obelisk.js模块// //这里我们需要Canvas作为模块参数var obelisk = require（＆＃39; obelisk.js＆＃39;）（Canvas）; //创建一个Node Canvas实例var canvas = new Canvas（600，450）; //使用方尖碑，就像在浏览器中使用方尖碑一样。// //将canvas保存到文件canvas。 createPNGStream（）。管道（fs。createWriteStream（＆＃39; ./ figure.png＆＃39;））;

像素艺术是数字艺术的一种形式，其中图像在像素级别进行编辑和显示。 在游戏中通常会看到等角投影，以提供3D视图而无需使用任何实际的3D处理。