陈帅华为JavaScript原型链可视化作品制作的动画图标DOM树形结构可视化

(2021年7月)从任意URL获取页面HTML源码后,将其解析为能描述DOM树结构的父子节点关系的JSON格式的数据,最后借助D3库将DOM树形结构可视化。该作品的意义包括:直观理解DOM树、DOM事件冒泡与捕获流;指导开发者优化简化HTML结构。

JavaScript原型链可视化演示

陈帅华为JavaScript原型链可视化作品制作的动画图标JavaScript原型链可视化

(2019年9月)以JavaScript标准内置对象为起点,以null为终点。对对象属性引用关系和原型链有直观的体验和经验。

JavaScript原型链可视化演示

陈帅华为历史的叶子作品制作的动画图标历史的叶子

(2020年6月)同时代历史文化名人可视化。

历史的叶子作品演示

陈帅华为康威生命游戏制作的动画图标康威生命游戏

(2019年10月)无人游戏。每个格子代表一个细胞,每个细胞的生与死受周围8个细胞的影响。孤独会死,拥挤亦然。

康威生命游戏

陈帅华为甘特图在线编辑工具制作的动画图标甘特图编辑工具

(2020年4月)甘特图用Canvas技术渲染,实现甘特图实时编辑,所见即所得。支持鼠标拖拽创建任务和修改起止日期,从云端导入JSON格式数据初始化甘特图,导出高清甘特图供下载打印。

甘特图在线编辑工具演示

陈帅华为在线图像标注工具制作的动画图标图像多边形裁切工具

(2018年12月)人工标注区域由Canvas技术渲染,实现绘制多边形标注线、裁剪图像区域功能。导出包含了标注区域图像像素、尺寸、多边形点坐标的JSON格式数据。

在线图像标注工具演示

陈帅华为地铁线路可视化作品制作的动画图标地铁线路可视化

(2019年9月)基于web端3D可视化库ThreeJS实现。于geojson.io定制道路线路图及地铁站。用折线表现纵横交错的街道、用放射动画标注地铁站坐标。

地铁线路可视化作品演示

grender.js

JavaScript Canvas 渲染引擎库

FUI/VFX 组件库 airglass.js 渲染引擎

下载中心API文档