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

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

10月4日
2019年
4.2分钟
定制地图与雷达波动效
Canvas

地图是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月5日
2019年
7.8分钟
Fabric.js扩展自定义类
CanvasFabricjs

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

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

W3C编写的这个Canvas规范是给浏览器厂商参考的,它告诉厂商们应该如何实现canvas的绘图上下文。而对于普通前端开发者来说,能知道其原理固然好,相比于这些细枝末节,能在工作中将canvas活学活用才更重要。所以这篇规范并不是前端必读,可以作为想更深入canvas的参考资料来看待。

3月10日
2020年
6.0分钟
非零与奇偶环绕规则
Canvas

非零环绕规则和奇偶环绕规则在Canvas和SVG中有很重要的用途,经常用它们制作有趣的剪纸效果。两种规则存在矛盾,所以开发者需要根据需求指定使用哪一种规则。一图胜千言,我画了两张涂鸦,分别解释这两种算法的原理。如何使用这两个规则的废话也不多说,代码也能胜千言,我会在下方拿出代码片段。