蓝紫程序的一切都从唯一的全局变量 Lan 开始，我们通常是使用 Lan.canvasxx 方法初始化画布，然后开始绘制。

const canvas = Lan.canvasxx(width, height, options)

我们也可以将 width 和 height 写在 options 中，比如：

const canvas = Lan.canvasfs({width:900, height:600, ...})

如果未指定 width 和 height，我们会采用 Canvas 元素样式宽高，同时参考其 scale 属性：

<canvas scale="2" style="width:600;height:400"><canvas>

这时候，计算得到的宽度为 600 x 2 = 1200，高度为 400 x 2 = 800。这样的处理方式对于我们集成蓝紫程序到第三方平台进行自动宽高处理非常有帮助，具体请参考我们在 jsFiddle 上的例子：蓝紫向导程序 - Fluid

无论采用哪种渲染引擎初始化画布，返回的 canvas 对象都会有一些公共属性：

• TYPE：画布类型，FS/CS/PS...
• DX：画布宽度
• DY：画布高度
• CX：画布宽度的一半（整数），即：DX >> 1
• CY：画布高度的一半（整数），即：DY >> 1
• ASPECT：画布宽高比（DX / DY）

画布初始化接口的参数基本是都是 (width, height, options) 这样的形式，我们也可以将 width 和 height 写在 options 参数里：

const canvas = Lan.canvasxx({
  width  : 900, 
  height : 600, 
  ...
})

每一种渲染引擎的画布初始化方法请参考对应的文档了解详情。

该方法用于循环执行，通常用于渲染动画或执行其它重复操作，maxframes 控制最多循环次数，或者当 callback 函数返回 false 的时候也会结束循环。回调函数 callback 形式如下：

callback(loop)

其中，参数 loop 是一个 JSON 对象，具有如下属性：

• time：从 loop 开始到现在经过的秒数（float），去掉了程序暂停时间；
• timeDelta：从上一帧到现在的秒数（float）增量；
• frame：从 loop 开始到现在的帧数，从 0 开始计数；
• seconds：从当日零点到现在的秒数（float），与程序暂停无关。

写程序运行日志

导入 JS 程序库，前提是该库必须是一个标准的 Module。比如 Lan.import('three') 用于引入 three.js 库。也可以通过 URL 地址导入外部 JS 库，比如：Lan.import('https://...')。以下是蓝紫缺省提供的 JS 库，可直接通过名称导入，名称不区分大小写：

• three
  three.js REVISION 161，来自 threejs.org。这是一个十分强大的库，被大家广泛使用，请参考向导程序：Three.js 几何体渲染。
• glMatrix
  glMatrix 3.4.0，来自 glmatrix.net。不只是 WebGL 程序可以使用，只要是需要矩阵的地方都可以，具体可以参考向导程序：三维点云渲染。
• math
  功能超多的数学库，math.js 12.4.0，来自 mathjs.org。适合对性能要求不高的场合，方便计算。
• matter
  2D 物理引擎，matter-js 0.19.0，来自 BRM·IO。蓝紫做了少量适配调整和 Bug 修正，特别是其中的运行调度部分及对画布背景处理上，可参考向导程序：Matter.js 物理仿真。
• rand
  fbm, simplex and perlin noise，参考示例程序：Perlin Noise。
• qrcode
  二维码编码器，参考示例程序：二维码渲染。
• effe
  蓝紫图像处理库，参考向导程序：Pixel Shader 图像处理。
• gair
  蓝紫图像几何重建 JS 库，参考示例程序：Image Reconstruction。
• circ
  蓝紫 Circle Packing 程序库，参考示例程序：Afghan Girl。
• lits
  蓝紫二维光线传播 JS 库，参考向导程序：lits 光线传播渲染。
• curve
  蓝紫二维函数渲染 JS 库，参考向导程序：函数曲线。蓝紫官方接口文档：蓝紫 curve.js 接口文档：轻松搞定二维函数渲染。

选择本地文件，比如，选择一个图像，然后可以使用该图像进行各种操作。返回文件对象（File）并附加如下属性和方法：

• URL：string，文件 URL 地址，可传入 Lan.image 或 Lan.video 等进行后续处理。

加载 colormap 资源，使用代码参考官方 Demo：Pixel Shader Colormaps。该函数返回一个数组：

const colors = [[r0, g0, b0], [r1, g1, b1], ... [r255, g255, b255]];
colors.get = (colval, [multiply = 1]) => {r, g, b};

其中，get 函数将 colval 映射为一个 {r, g, b}，可以通过传入 multiply 对输出颜色调整为 rgb255 颜色。

加载并播放音频文件，返回 Audio 对象，同时附加如下属性和方法：

• fft_points：int，FFT 频率数据长度；
• fft_buffer()：获取当前 FFT 频率数据，返回 Uint8Array 类型对象。

加载图像，返回 ImageData 对象，并附加如下属性及方法：

• DX：int，图像宽度；
• DY：int，图像高度；
• ASPECT：float，图像宽高比；
• get(x, y) => {r, g, b, a}：该方法取得该图像某个点的颜色数据，超出图片范围时返回 undefined；
• scale(factor)：该方法返回一个缩放后的 ImageData 对象，该对象同样具有 DX、DY、ASPECT 属性以及 get、scale 方法。

由于 CanvasRenderingContext2D.drawImage 不支持 ImageData 数据源，如果需要在 canvas2d 渲染引擎里使用 drawImage 函数渲染 ImageData，可以使用 await createImageBitmap 先将 ImageData 转换为 ImageBitmap 对象。

加载视频，返回 Video 对象，附加如下属性：

• DX：int，视频宽度；
• DY：int，视频高度；
• ASPECT：float，视频宽高比。

打开摄像头，返回 Video 对象，附加如下属性：

• DX：int，视频宽度；
• DY：int，视频高度；
• ASPECT：float，视频宽高比。

通过 options 可以指定一些参数：

const camera = Lan.camera({
  width  : 1280, 
  height : 720
})
const camera = Lan.camera({
  width  : { min: 1280 },
  height : { min: 720 },
})
const camera = Lan.camera({
  width  : { ideal: 1280 },
  height : { ideal: 720 },
})

我们可以使用本接口取得鼠标设备状态，options.flipy 控制是否将 Y 方向坐标翻转。const mouse = Lan.mouse()，返回对象有如下属性：

• curx: 鼠标当前 X 坐标；
• cury: 鼠标当前 Y 坐标；
• oldx: 鼠标之前 X 坐标；
• oldy: 鼠标之前 Y 坐标；
• hitx: 鼠标最近一次点击 X 坐标；
• hity: 鼠标最近一次点击 Y 坐标；
• down: boolean，鼠标是否按下；
• amid: boolean，鼠标是否在画布范围内。

当用户未与 Canvas 产生交互的时候，坐标值为 undefined。鼠标交互接口具体使用方法可参考 canvasps 引擎向导程序 粒子系统。我们可以直接在返回的 mouse 对象上为画布配置鼠标交互处理器：

• onhover([curx, cury])
  处理鼠标在画布上浮动的事件，鼠标移出后触发一次无参数（undefined）调用；
• ontouch(curx, cury[, oldx, oldy])
  处理鼠标按下并在画布上移动的事件，当只按下未移动的时候 oldx 及 oldy 参数为 undefined；
• onclick(curx, cury, down)
  处理鼠标点击事件，按下及抬起的时候均调用此方法，down 表明是按下还是抬起。

具体使用方法，请参考蓝紫 canvas2d 引擎的向导程序：交互式画布。

我们可以使用本接口生成一个高斯卷积核，返回对象是一个正方形的二维数组 kernel[][]，每一个元素均为一个浮点数，所有数字相加等于 1。附加属性及方法如下：

• size: 卷积核尺寸（卷积核高宽相等），恒为奇数（对称）；
• vmin: 卷积核矩阵中的最小值；
• vmax: 卷积核矩阵中的最大值；
• data: 返回一个长度为 size x size 的 Float32Array；
• async conv(image_data): 将卷积核应用到 image_data 并返回一个新的 ImageData 对象。

具体使用示例，请参考 Gaussian Kernel。