包含标签 canvas 的文章

Canvas2D渲染库简析:(三)Pixi

fabric和konva主要是用于实现编辑器的场景,而Pixi则是一个高性能2D动画渲染库,通常用于一些H5的小游戏或可交互页面。本次通过以下几个方面来对其进行分析:

  • WebGL与Canvas渲染器
  • 资源加载器与纹理
  • 场景、精灵与图形对象
  • 变换、交互及动画处理
……

阅读全文

Canvas2D渲染库简析:(二)Konva

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

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

阅读全文

Canvas2D渲染库简析:(一)Fabric

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

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

阅读全文

puppeteer+canvas的e2e测试实践

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

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

……

阅读全文