PixiJS 学习笔记与实战

PixiJS 是一个轻量且强大的 2D 渲染引擎，基于 WebGL 和 Canvas 技术，让你轻松创建丰富的交互式图形、动画和游戏。

📚 教程目录

章节	内容	难度
01 - PixiJS 简介	什么是 PixiJS、Hello World 在线体验	⭐
02 - 快速入门	创建应用、渲染基础图形	⭐
03 - Sprite 与纹理	图片加载、Sprite 管理与纹理系统	⭐⭐
04 - 交互事件	点击、拖拽、悬停事件处理	⭐⭐
05 - 动画与 Ticker	Ticker 驱动、缓动函数、动画循环	⭐⭐⭐
06 - 粒子系统	ParticleContainer 与粒子特效	⭐⭐⭐
07 - 滤镜效果	内置滤镜与自定义滤镜	⭐⭐⭐⭐
08 - 小游戏实战	从零实现一个完整小游戏	⭐⭐⭐⭐⭐
09 - HTMLSource	DOM 渲染为可交互纹理（v8.19+）	⭐⭐⭐⭐

🎮 Demo 示例

所有 Demo 均可在线交互体验，也可以在文章末尾点击"在新窗口打开"全屏运行：

Demo	说明	难度
Hello World	最简 PixiJS 应用	⭐
基础图形	绘制矩形、圆形、线条、多边形	⭐
Sprite 演示	Sprite 变换与组合	⭐⭐
交互事件	拖拽、点击、悬停、键盘事件	⭐⭐
动画效果	Ticker 动画、缓动、弹性动画	⭐⭐⭐
粒子系统	粒子特效、鼠标追踪粒子	⭐⭐⭐
滤镜特效	发光、模糊、颜色矩阵等滤镜	⭐⭐⭐⭐
Flappy Bird	完整小游戏，含碰撞检测与计分	⭐⭐⭐⭐⭐
HTMLSource	可交互 DOM 卡片 + 快照	⭐⭐⭐⭐