陈帅华的个人网站 - 探索技术艺术与国学之美
9月7日
2017年
35.0分钟
[译] socket.io官方文档·上篇
WebSocket

socket.io基于WebSocket协议封装,兼容不支持ws的浏览器采用ajax轮询,socket.io为开发者提供服务端和客户端两套库,无需了解全部ws底层原理,好入门,上手快。学会socket.io后可搭建类似QQ和微信这种即时通信工具的Web版,既可以一对一对话也可开房间组队创建聊天群组,我尝试过传输的媒体类型有文本、图像两种,数据都可由1和0表示,所以理论上可传输任何媒体形式。

1月22日
2019年
3.8分钟
Fabric.js高级—后端渲染
Fabricjs

Fabric.js高级教程包括了在画布上自由涂鸦;从画布输出图像;在Node环境使用Fanric.js;与画布、对象元素矩阵变换相关的工具函数和方法;我认为最值得学习的是在Node环境使用Fabric.js,首先它拓宽了Fabric.js的应用场景,其次它丰富了无界面的后端环境下的图像处理技术栈。

8月13日
2019年
6.1分钟
Blender建模导入Three.js渲染
ThreejsBlender

Blender 是一款非常优秀的免费开源 3D 创意软件,支持 Windows、macOS 和 Linux 界面操作系统,支持众多常见的导入和导出格式。Three.js 是一款由 JavaScript 语言编写的用于 Web 端展示的优秀 3D 开源库,常在 Web 游戏、可视化、真实场景模拟等领域中被使用。两款优秀且开源的 3D 创意工具的碰撞,必定能为产品、设计师和前端工程师带来无限创造力。

12月9日
2018年
3.9分钟
在线图像标注工具
独立作品

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

12月5日
2018年
11.9分钟
Nodejs解析编辑与写入Excel表格
Nodejs

实现多种数据格式精准插入单元格,支持在excel中创建多个Sheet,并支持.xlsb .xls .csv .txt等多种数据文件导出格式。

11月16日
2017年
15.0分钟
[译] socket.io官方文档·下篇
WebSocket

socket.io基于WebSocket协议封装,兼容不支持ws的浏览器采用ajax轮询,socket.io为开发者提供服务端和客户端两套库,无需了解全部ws底层原理,好入门,上手快。学会socket.io后可搭建类似QQ和微信这种即时通信工具的Web版,既可以一对一对话也可开房间组队创建聊天群组,我尝试过传输的媒体类型有文本、图像两种,数据都可由1和0表示,所以理论上可传输任何媒体形式。

1月17日
2019年
5.2分钟
Fabric.js入门—面向对象
Fabricjs

对象模型/画布/图像/路径

3月20日
2017年
3.7分钟
Ai绘制SVG矢量图CSS3做动画
CSSSVG

Ai 的全称是 Adobe Illustrator。就像 Ps 的全称是 Photoshop 一样。他们都是 Adobe 公司旗下优秀的图形图像创意产品。Ps 面向摄影师,Ai 面向矢量图形设计师。Ai 和前端的结合点在于 SVG。在 Ai 中制作的矢量图形能导出成 SVG 格式的文件。SVG 又能通过 CSS 控制其部分样式。CSS3 新增了 transform 属性和 keyframe 特性,所以 SVG 配合 CSS3 就能制作出有意思的动效出来。

1月5日
2019年
2.9分钟
基于Node/Canvas/WebSocket直播
WebAPICanvasNodejsWebSocketFFmpeg

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

6月18日
2017年
69.6分钟
[译] XMLHttpRequest规范
WebAPIAJAX

XMLHttpRequest标准为客户端和服务器端传输数据提供了脚本化的客户端功能API。

12月15日
2018年
13.0分钟
前后端分离开发微信网页端项目
微信网页端

我将在本文中阐述我对前、后端分环境开发——尤其是在微信公众号网页端项目中前、后端如何分环境开发——的思考。

1月17日
2019年
5.9分钟
Fabric.js进阶—事件驱动
Fabricjs

动画/图像滤镜/颜色/渐变/文字排版/事件

12月22日
2018年
6.4分钟
微信网页端获得用户授权
微信网页端

帅华君将在本文介绍基于Nodejs微信网页授权以及如何正确在前后端配置JSSDK接口。

4月11日
2018年
4.2分钟
使用Animate设计动画图标
动画制作图标设计

我深知灵感从来都不是容易出现的,我不是一位需要随时都有灵感的专业的创意设计师,而是一名大部分时间依靠足够丰富的编程经验就能搞定事情的前端工程师。一点新鲜感,加一点点突如其来的灵感,为了不浪费这来之不易的灵感,我为自己的个站设计了几枚动态图标。这篇想法我要分享自己是如何使用 Adobe Animate CC 为自己的个站制作小而美的动态LOGO的。制作逐帧动画真的需要很大的耐心。如果完成一枚动态LOGO需要100%的精力,一瞬间的灵感只占30%,剩下的70%用专注和耐心灌溉,坐得住很重要。

8月1日
2019年
2.6分钟
常用基于Node命令行工具
Nodejs

偶尔需要更新命令行工具版本或者更换电脑的时候,许多命令行工具的安装和配置细节已经记不清,所以汇总记录下来。

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

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

10月6日
2019年
9.9分钟
探索JS原型链规律性可视化
独立作品

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

9月5日
2017年
4.9分钟
缓存公众号的access_token
微信公众号

本篇介绍如何获取ACCESS_TOKEN并将其缓存,以避免接口调用次数超额。

8月26日
2019年
5.5分钟
探索前端录制音视频
WebAPI音视频开发

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

3月3日
2019年
5.6分钟
JavaScript原型链学习指南
JavaScript

我使用颜色与形状的可视化方法,将JavaScript中对象原型与原型链的抽象概念呈现在在涂鸦上,乍一看复杂,细看恍然大悟。

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

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

6月11日
2019年
1.4分钟
接收微信公众号事件推送
微信公众号

微信用户与公众号发生交互时,用户操作通过事件推送形式通知开发者在开发者中心设置的服务器,开发者可获取并处理消息。

7月19日
2019年
11.8分钟
Arduino硬件编程入门
Arduino

由于Ruff的不成熟给开发带来诸多不便,弃坑Ruff拥抱Arduino,从点亮一排LED入门Arduino开发板的学习吧。

10月31日
2017年
20.5分钟
完全掌握Pug模版引擎看这篇就够了
Pug

Pug模版引擎是一款高效率的模板引擎,可在Node.js中运行,支持JavaScript脚本。

7月25日
2019年
7.2分钟
Arduino制作流水灯
Arduino

先回顾Arduino基础,搭配涂鸦图解数字信号与模拟信号,逐步引导了解如果使用Arduino开发板制作了ED流水灯效果。

10月19日
2016年
3.0分钟
FB占位加载动效前端实现原理
UED

最早我发现这种预加载占位的设计是在微博移动端首页到单条微博详情页的跳转之后到内容加载完毕之前这段时间内,之后在我的facebook首页加载时间轴时发现facebook为这一设计加入了辉光动效,在之后是在知乎中的出现。

10月30日
2019年
5.3分钟
基于Airglass重构图像标注工具
独立作品

我又重新实现了一版依赖Airglass.js库的基于Canvas技术的功能包括多边形区域标注以及图像切割的实验项目,这篇想法记录开发过程。

10月2日
2016年
11.8分钟
动图解释JS中的原型链
JavaScript

帅华君用Adobe Illustrator创作了一张可视化信息图,帮助理清Javascript对象与__proto__、prototype和原型链的关系

9月6日
2018年
3.2分钟
ml5js助力前端玩转机器学习
机器学习TensorFlow

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

11月24日
2018年
2.4分钟
从太极阴阳幻化到个站四季狂想
个站研发

从庄周梦蝶到身体形式的各站停靠。从四季幻化到事物的生长与收藏。走过春夏与秋冬迎接又一个轮回。个站全新改版四季狂想

按月份速查已发布想法。查看3D柱状可视化
想法关键词
陈帅华个站动态先知道,请关注一个教程。
一个教程微信个人订阅号

Leo陈帅华 · 2月13日留言 · 去围观

测试

陈帅华 · 10月9日留言 · 去围观

系统升级到macOS Catalina后,终端默认使用zsh shell,虽然之前没有听说过这个命令行工具,不过需要认识新的配置文件.zshrc,默认的每启动一个命令行都会执行这个配置文件。所以source .bash_profile需要每次启动新命令行工具后自动执行一次。

jannylz · 9月11日留言 · 去围观

请问在线体验入口在哪里?可否标注矩形框,可以拖拽类型的