陈帅华的个人网站 - 探索技术艺术与国学之美
Canvas
发布8篇关联想法
1月5日
2019年
2.9分钟
基于Node/Canvas/WebSocket直播
CanvasNodejsWebAPIWebSocketFFmpeg

借助socket.io模块双向传输视频直播流,本文涉及canvas绘制捕获到的视频流,及从服务端接收编码后的图像帧并通过canvas渲染。

10月4日
2019年
4.2分钟
定制地图与雷达波动效
CanvasAirglass数据可视化

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

7月14日
2018年
1.8分钟
微电路流光动效
Canvas

在信工所的这段时间,收获最多的却是我。FUI视觉语言,极具科幻感。

2月18日
2017年
0.9分钟
Canvas实现虚拟元素拖拽
Canvas

Canvas实现虚拟元素拖拽。

9月23日
2019年
9.4分钟
节点关系可视化
CanvasAirglass数据可视化

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

9月5日
2019年
7.8分钟
Fabric.js扩展自定义类
CanvasFabricjs

Fabric.js在 util 命名空间中提供了各种有用的工具函数,其中就包括创建类的函数。使用该函数创建的类,能继承开发者指定的父类的特性,并且还能重写父类的方法以及为新创建的类定义新的方法。比如你可以创建继承了 Fabric 中既有的矩形的新类,并且你可以让新创建类在画布上渲染时,在绘制矩形的基础上再绘制一段文本。

10月25日
2019年
11.1分钟
生命游戏开发记录
AirglassCanvas独立作品

完善Airglass.js的继承机制,增加了extend方法,优化了Renderable和Effect两个基础可渲染类。采用常见规则借助Airglass.js实现出了生命游戏,与网络上其他版本不同的是,我使用了彩色格子。进一步加深了我对面向对象编程思维的理解与应用熟练度。

8月29日
2017年
45.1分钟
[译] HTML Canvas 2D Context
Canvas

该规范定义了HTML canvas 的2D绘图上下文,这个2D绘图上下文提供了一些对象,方法和属性来在canvas画布上绘制丰富的图像。