蓝紫程序的一切都从唯一的全局变量 Lan 开始,我们通常是使用 Lan.canvas
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
无论采用哪种渲染引擎初始化画布,返回的
DX >> 1
DY >> 1
DX / DY
)画布初始化接口的参数基本是都是 (width, height, options) 这样的形式,我们也可以将 width 和 height 写在 options 参数里:
const canvas = Lan.canvasxx({
width : 900,
height : 600,
...
})
每一种渲染引擎的画布初始化方法请参考对应的文档了解详情。
该方法用于循环执行,通常用于渲染动画或执行其它重复操作,maxframes
控制最多循环次数,或者当 callback
函数返回 false
的时候也会结束循环。回调函数 callback
形式如下:
callback(loop)
其中,参数 loop
是一个 JSON 对象,具有如下属性:
loop
开始到现在经过的秒数(float
),去掉了程序暂停时间;float
)增量;loop
开始到现在的帧数,从 0
开始计数;float
),与程序暂停无关。写程序运行日志
导入 JS 程序库,前提是该库必须是一个标准的 Module。比如 Lan.import('three')
用于引入 three.js
库。也可以通过 URL 地址导入外部 JS 库,比如:Lan.import('https://...')
。以下是蓝紫缺省提供的 JS 库,可直接通过名称导入,名称不区分大小写:
选择本地文件,比如,选择一个图像,然后可以使用该图像进行各种操作。返回文件对象(File)并附加如下属性和方法:
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 对象,同时附加如下属性和方法:
int
,FFT 频率数据长度;加载图像,返回 ImageData 对象,并附加如下属性及方法:
int
,图像宽度;int
,图像高度;float
,图像宽高比;undefined
;由于 CanvasRenderingContext2D.drawImage 不支持 ImageData 数据源,如果需要在 canvas2d 渲染引擎里使用 drawImage 函数渲染 ImageData,可以使用 await createImageBitmap 先将 ImageData 转换为 ImageBitmap 对象。
加载视频,返回 Video 对象,附加如下属性:
int
,视频宽度;int
,视频高度;float
,视频宽高比。打开摄像头,返回 Video 对象,附加如下属性:
int
,视频宽度;int
,视频高度;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()
,返回对象有如下属性:
boolean
,鼠标是否按下;boolean
,鼠标是否在画布范围内。当用户未与 Canvas 产生交互的时候,坐标值为 undefined
。鼠标交互接口具体使用方法可参考 canvasps 引擎向导程序 粒子系统。我们可以直接在返回的 mouse
对象上为画布配置鼠标交互处理器:
undefined
)调用;oldx
及 oldy
参数为 undefined
;down
表明是按下还是抬起。具体使用方法,请参考蓝紫 canvas2d 引擎的向导程序:交互式画布。
我们可以使用本接口生成一个高斯卷积核,返回对象是一个正方形的二维数组 kernel[][]
,每一个元素均为一个浮点数,所有数字相加等于 1
。附加属性及方法如下:
size x size
的 Float32Array;image_data
并返回一个新的 ImageData 对象。具体使用示例,请参考 Gaussian Kernel。