CCapture.js 使用指南：如何把 Canvas 动画导出成视频
【免费下载链接】ccapture.jsA library to capture canvas-based animations at a fixed framerate项目地址: https://gitcode.com/gh_mirrors/cc/ccapture.js
如果你用 Canvas 或 WebGL 写动画，想把它导出成视频，CCapture.js 会按固定帧率（默认 60fps）录制。单帧渲染哪怕要几秒，成片的时间轴依然一致，支持 WebM、GIF 和图片序列输出。
一、它能帮你做什么
- 录制 3D 游戏或 Web 演示的宣传片，画质和粒子数随便拉高
- 把数据可视化动效导出成视频，放进汇报或文章
- 将 Canvas 艺术创作转成 GIF，方便在网络分享
- 高分辨率渲染逐帧图，交给后期软件处理
二、3 步跑通第一个 Demo
先拿到代码，npm 安装或直接 clone 仓库：
npm install ccapture.js # 或 git clone https://gitcode.com/gh_mirrors/cc/ccapture.js第 1 步：把核心脚本引到页面。除了主文件，还要带上目标格式对应的编码器和下载辅助脚本，这里选 WebM。
<script src="src/CCapture.js"></script> <script src="src/webm-writer-0.2.0.js"></script> <script src="src/download.js"></script>第 2 步：创建录制器并启动，之后页面里的计时 API 会被接管。
var rec = new CCapture({ format: 'webm' }); rec.start();第 3 步：在渲染循环里把当前帧交给编码器，录完后停止并保存。
function draw() { requestAnimationFrame(draw); // render your animation here rec.capture(canvas); } draw(); rec.stop(); rec.save(); // triggers the download三、工作原理速览
核心手法是"换掉时钟"。start()之后，CCapture.js 会把Date.now()、setTimeout、setInterval、requestAnimationFrame、performance.now以及音视频currentTime这些时间来源替换成虚拟时间，每处理完一帧就推进固定的1000/framerate毫秒，再重新执行动画排队的 rAF 回调。动画以为自己在完美的帧率环境里跑，实际渲染慢多少都不影响成片节奏。
编码侧按格式各用一个编码器，都挂在统一的CCFrameEncoder接口下：WebM 走 WebMWriter 压缩，GIF 交给 gif.js 的 Web Worker 编码，PNG/JPG 则用 tar.js 把帧图打包成 .tar 文件，最后由 download.js 触发浏览器下载。
四、常用参数速查表
| 参数 | 类型 | 默认值 | 作用 |
|---|---|---|---|
framerate | number | 60 | 录制的目标帧率 |
format | string | — | 输出格式：webm / gif / png / jpg / ffmpegserver |
quality | number | 80 | webm、jpg 的压缩质量（0~100） |
timeLimit | number | 0 | 到达 n 秒后自动停止并导出 |
autoSaveTime | number | 0 | 每 n 秒自动分段下载，防止内存撑爆 |
workersPath | string | — | gif 格式所需的 worker 脚本路径 |
五、踩坑与调优
Q：为什么录出来的动画节奏不对？结论：动画必须按时间差推进，而不是每帧加固定值。把x += v改成x += v * dt，时间钩子才能生效。
Q：长时间录制内存暴涨怎么办？结论：设置autoSaveTime（4K 建议 10~30 秒）分段下载并释放内存，单个分段文件控制在 1GB 以内。
Q：为什么 WebM 导不出来？结论：WebM 编码器依赖 WebP 支持，目前基本只有 Chrome 可用，换gif或 png 序列即可绕过。
六、从 Demo 到生产
- 运动模糊：
framerate: 240高帧率录制后在后期抽帧，或直接设motionBlurFrames让库对中间帧超采样模糊。 - 无人值守长录：
timeLimit: 3600配autoSaveTime: 15，录满自动导出分段。 - 慢动作：以 120fps 录制、按 30fps 导出，直接得到 4 倍慢放素材。
七、相关资源
- 核心录制逻辑
- GIF 编码器源码
- WebM 编码器源码
- 示例项目
下一步：先用 examples/ 里的 webm 流程跑一遍，再把你动画里的 canvas 接进 capture 调用。
【免费下载链接】ccapture.jsA library to capture canvas-based animations at a fixed framerate项目地址: https://gitcode.com/gh_mirrors/cc/ccapture.js
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
