我最近有15个想法我全部的128个想法→
10月17日
星期四
6.7分

Airglass.js现已支持关键帧动画

关键帧动画Airglass.js开发笔记

Airglass.js最近的更新中支持了关键帧动画,这依赖于canvas离屏渲染技术。开发者可以从序列图创建关键帧,也可以拷贝其他可渲染组件的关键帧,这适用于希望呈现相同效果的组件,以节省不必要的内存开销。我还在探索关键帧渲染与直接渲染之间的平衡点。

10月6日
星期日
17.9分

可视化JavaScript核心知识探索原型链规律性

javascript核心参考JavaScript原型链

我曾经用Illustrator绘制过JavaScript原型链可视化信息图,也曾在最近用iPad手绘过一副JavaScript原型链的涂鸦。如今我借助Airglass.js开发的NodeLink可视化组件动态演示JS核心参考中各值之间的信息传递与关联关系。

10月4日
星期五
6.9分

Airglass.js最佳实践:定制化地图与雷达波动效

airglass.js最佳实践

地图是FUI界面中常出现的组件之一。我希望Airglass.js能处理好地图渲染,以及地图中丰富多样的动效,所以尝试用Airglass.js完成一个关于地图的最佳实践。在探索的中后期,我将Three.js纳入解决方案与Airglass.js来一次混搭。

9月23日
星期一
15.7分

Airglass.js最佳实践:节点关系可视化工具

airglass.jsnodelinkairglass最佳实践

经过了一周断断续续的探索,Airglass.js的第二个组件NodeLink终于大功告成。这期间我从Dribbble和Behance等设计网站借鉴了不少创意灵感,以及Blender操作界面给我的启发。在开始下一个组件的开发之前,我想通过这篇想法简单谈谈NodeLink组件。

9月12日
星期四
11.5分

Airglass.js最佳实践:多边形区域标注工具

airglass.js多边形标注颜色canvas编辑多边形区域airglass开发笔记

我用airglass.js初步完成了第一个最佳实践:创建和编辑多边形标注区域。做Demo的同时完善Airglass.js。我给渲染器类新增了击中检测实例方法,还增加了链式调用提升开发效率。同时新增多边形Polygon类,它是继矩形圆形后Airglass.js出现的第3个基本形状。接下来是对Demo无止境优化的漫漫长路。

9月10日
星期二
5.4分

Airglass.js开发笔记 : 最佳实践前奏

airglass.js最佳实践Airglass开发笔记

我把Glass的集合称作舞台。理论上每一个舞台中Glass的数量是无上限的。我并不推荐一个舞台上有超过3个Glass。最理想的情况是,顶层Glass用来捕获外部事件与放置可交互元素,下层Glass用来放置数据驱动型的元素。

9月9日
星期一
2.8分

Airglass.js开发笔记:订阅

订阅canvas合成事件airglass的故事

Airglass有层叠玻璃的概念,为此我创建了Glass类,并让Renderer类继承Renderer。Glass类实现了处理原生与非原生的合成事件的订阅与退订功能。每一层渲染器都可以订阅其他任何渲染器发生的事件。最顶层的渲染器用来捕获和发布外部原生事件,就像最上层玻璃能感知光线穿过,层层传递给下层玻璃。

9月8日
星期日
5.5分

Airglass.js开发笔记:监听

canvas虚拟事件委托JS类的继承airglass的故事

Airglass要做的是FUI/HUD风格UI组件库。用户界面自然少不了对界面交互的支持。利用事件委托的方式,canvas将监听到的鼠标和触摸事件派发给canvas中绘制的虚拟元素。我甚至让开发者能够订阅虚拟元素触发的各种定制化事件。从而实现用户操作canvas画布上虚拟UI的可能。

9月6日
星期五
2.4分

Airglass.js开发笔记:起步

typescript构建类库设计继承类webpack构建类库airglass.js开发笔记

Airglass是我在2017年的夏天想要启动的独立项目——基于Canvas技术开发一款支撑FUI/HUD视觉风格用户界面的基于面向对象思想与方便扩展组件的基础组件库。从本篇开始我会一边开发Airglass.js一边详解开发过程。

9月5日
星期四
10.7分

在Fabricjs创建继承类与应用计算变换矩阵

fabricjs创建继承类fabricjs变换矩阵

Fabricjs提供创建继承类的主要目的是让开发者根据需要在现有类如Rect/Image的基础上自行扩展其父类的功能。矩阵变换在Fabricjs中有重要应用,比如点击位置从相对于canvas的坐标到相对于虚拟元素的矩阵变换,再如多个虚拟元素之间绑定变换关系。

9月1日
星期日
5.3分

ml5js助力前端玩转机器学习

ml5js机器学习ml5js神经网络图像识别

ml5js获取服务器上已经训练好的模型,调用ml5js提供的API即可在Web前端玩转典型机器学习案例,ml5js官方提供的机器学习案例类型有图像、声音和文本三个类别,我将体验过程记录下来。

8月30日
星期五
6.3分

交互式命令快速选择并构建前端项目

交互式命令行交互式CLINode命令行交互式构建前端项目

文接上篇。我通过将项目源代码与构建代码分离的方法,解决了我托管在GitHub上的多个项目因存在构建代码相似和各项目NPM依赖更新频繁且重复的问题。本篇我将进一步在有多个前端项目的开发场景中使用交互式命令行——能够快速选择项目并构建项目。

8月28日
星期三
8.8分

Github项目因NPM依赖包版本低存在安全漏洞

github依赖包隐患npm依赖风险源代码与构建代码分离

下午邮箱收到一连串GitHub推送的警告信息,说因为NPM依赖包版本存在安全漏洞。又由于牵扯项目太多,上次出现这一问题我是挨个项目升级NPM依赖包。于是换了一种解决思路。

8月26日
星期一
9.2分

探索Web前端获取音视频流录制视频

html5录视频前端录视频前端获取音视频流

最近整理我的一些独立项目,考虑用音视频的形式记录感想,起初在用Mac系统自带的录屏软件,后来计划能不能用web前端技术开发一款在线录制音视频的工具,小有成果,先用文字形式记录下来。

8月22日
星期四
4.1分

在线图像标注工具

陈帅华开源项目在线图像标注在线多边形套索工具

基于canvas技术在图像上绘制多边形,最终得到包含透明通道的裁切后的base64编码图像,以及全部标注点位置坐标数据。

🌈找工作【HTML5/数据可视化创新界面设计与开发/Web3D/新媒体艺术】兼具技术探索与艺术创意的职位。希望职位具备与员工能力相匹配的薪酬待遇、晋升空间与成长机会。已离职,目前在石家庄居住,工作城市不限。合适细聊。
陈帅华的微信二维码
2015-2019各年12个月想法出现频次分析:
出现于夏末至次年初春频次总体高于其他时期
Airglass.js / Future User Interface
想法·互动装置
想法·动效与交互设计
一个教程 · 我的微信公号
一个教程公众号二维码
[项目] 在线音/视频流录制工具
[项目] 在线音/视频流录制工具 (1幅)
[项目] Web Audio模块连接
[项目] Web Audio模块连接 (1幅)
[项目] 在线图像取色/配色工具
[项目] 在线图像取色/配色工具 (1幅)
[项目] 中国传统二十四节气
[项目] 中国传统二十四节气 (3幅)
新版个站博客体验设计
新版个站博客体验设计 (1幅)
[图解]Deno
[图解]Deno (1幅)
[脑图]规划
[脑图]规划 (3幅)
[图解]JavaScript
[图解]JavaScript (2幅)
[图解]Mithril
[图解]Mithril (6幅)
[图解]企业项目管理可视化方案
[图解]企业项目管理可视化方案 (4幅)
旧站shuaihua.cc四季概念
旧站shuaihua.cc四季概念 (4幅)
十二生肖&文章标签对应关系
十二生肖&文章标签对应关系 (3幅)