原生 Canvas、React-konva 画网格 我们设定 canvas 初始化左上角顶点为 0,0 点，向右👉和向下👇是 X Y 轴正方向 一、原生 Canvas 画网格 1、使用 Canvas

pixi.js是一个非常快速的2D精灵渲染引擎。它可以帮助我们显示，动画和管理交互式图形。如此一来，我们可以使用javascript和其它HTML5技术来轻松实现一个应用程序或者完成一款游戏。它有一个语义化的、简洁的API，包含了许多有用的功能。比如说支持纹理地图集，也提供一个…

本期将用 pixi.js 来完成一个水波交互动画，里面包括了水体扭曲和点击水波扩散的效果，主要利用了 pixi.js 库以及关于它的滤镜的使用。

此篇文章源于前段时间商业有个项目需求，要实现一个比较复杂的H5交互动画。那说到动画常用的技术方案无非是下面几种： gif图和css3动画属性显然只能实现展示型动画，而通过原生代码实现交互动画又是很复杂的，同时还得考虑动画的兼容性和性能问题。WebGL因为可提供硬件加速渲染，其渲…

fabric和konva主要是用于实现编辑器的场景，而Pixi则是一个高性能2D动画渲染库，通常用于一些H5的小游戏或可交互页面。 Pixi是一个基于WebGL Renderer的高性能跨平台渲染库。其中默认使用WebGL相关插件(回退使用CanvasRenderer)去渲染2…

本文将从技术选型的各种考虑因素（如技术的社区活跃度、文档丰富程度、具体落地案例、性能、适用场景、人员学习成本等）对这四个图形库进行对比, 并针对编辑能力做了详细的对比表~