与古老的Fabric相比，Konva的使用更为便捷，性能更加优益，这些得益于其内部的种种设计，本次通过以下几个方面来对其进行分析：

• 基础元素及上下文的扩展
• 图形变换处理(变换计算及独立的图形控制器)
• 光标交互处理(基于像素的目标检测)
• 层级渲染处理

阅读全文

了解Canvas2D渲染功能实现与设计，在使用时知其所以然，在创造时有所借鉴。从以下这四个方面来分析Fabric.js

• 对象模型处理(使用及设计实现)
• 图形变换处理(canvas与object变换)
• 光标交互处理(目标检测与事件处理)
• 画布与对象渲染处理(多层结构与多阶段绘制)

阅读全文

针对具有复杂canvas交互操作的e2e测试，尝试使用puppeteer模拟复杂canvas交互，自动执行相关测试用例，利于减少重复的人工验证和回归测试。

主要做了封装通用操作，添加操作辅助类，与测试工具集成，结果验证等工作。

阅读全文

目前Web中主要有两种方式可以显式的调用GPU来执行计算任务：

1. GPU.js - 第三方工具。使用JS编写计算任务，内部转换成GLSL交由GPU(OpenGL ES)处理
2. WebGPU - w3c规范(19-11-12时处于Editor’s Draft阶段)，提供通用的GPU API，抹平不同底层图形API之间的差异(Vulkan, D3D, Metal)

阅读全文

Tl;DR：

1. OffscreenCanvas可以让你在Worker线程中渲染图形，支持多种RenderingContext
2. 两种使用方式：同步的Transfer模式与异步的Control模式
3. 将Canvas的逻辑计算与渲染分离，避免UI线程阻塞

阅读全文

关于canvas的使用经验及深入学习总结，主要有以下几个方面：

1. 基础绘图、平滑曲线和交互变换
2. 状态管理及图像处理
3. 性能优化与绘制原理

阅读全文

总结在使用canvas时遇到的一些通用效果实现与相关示例。

阅读全文

从CDP与源码的角度简单分析下pptr中的常用API

阅读全文

Houdini, in essence, gives developers lower level access to CSS itself.

• Worklets, TypedOM, Custom Properties
• Paint API, Animation API, Layout API

阅读全文

微信基础库1.7.0之后的版本提供了新版的WebSocket API，考虑到兼容性问题，尝试整合新旧两种版本的API，进行简单的封装。

阅读全文