用途：本技能提供 GSAP 动画渲染到 HTML5 Canvas 的生产级配方，是官方 gsap-core（核心 API）与 gsap-timeline（时间线编排）技能的配套，仅覆盖 Canvas 渲染部分，需依赖 greensock/gsap-skills。流程为 gsap-setup → gsap-canvas → gsap-optimise → gsap-test。
主要能力：核心模式是 GSAP 不直接操作 DOM 元素，而是对含 x、y、scale、rotate、alpha 等数值属性的普通 JS 对象做补间，由 GSAP 负责缓动、交错、重复、往复与时间线编排；再通过时间线的 onUpdate 回调读取对象当前值，用 Canvas 2D API 逐帧绘制。文档给出圆点移动的最小示例，以及粒子系统配方：用 99 个带图片的粒子做向内环绕运动，通过 stagger 的 each 负值与 repeat:-1 实现循环交错，并用 timeline.seek(99) 跳到中段；draw 函数中按 scale 做 z 排序后逐粒子 translate、rotate、drawImage 并 resetTransform。
使用方式：播放/暂停可用 gsap.to(tl, { timeScale: tl.isActive() ? 0 : 1 }) 平滑切换；窗口缩放时更新 canvas 与 radius 后调用 tl.invalidate() 重新计算基于函数的 from 值。参考资料 references/canvas-patterns.md 含粒子环绕系统与 canvas 变形的完整实现。
性能提示：用 gsap.ticker.add(fn) 渲染循环以同步 GSAP 内部 rAF；减少状态切换、批量处理 translate/rotate 并每粒子调用一次 resetTransform；每帧 sort 为 O(n log n)，z 序固定时可跳过；给 canvas 设 will-change: transform 以提升到 GPU 层；优先用 ctx.resetTransform() 而非 save/restore；静态精灵可预渲染到 OffscreenCanvas。
限制：本技能仅覆盖 Canvas 渲染配方，不提供 GSAP 核心 API 与时间线细节，需配合上述两个技能；文档未说明收费、价格、支持平台与浏览器兼容范围，暂未提供。