CCapture.js 使用指南：如何把 Canvas 动画导出成视频

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 srcsrc/CCapture.js/script script srcsrc/webm-writer-0.2.0.js/script script srcsrc/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 触发浏览器下载。四、常用参数速查表参数类型默认值作用frameratenumber60录制的目标帧率formatstring—输出格式webm / gif / png / jpg / ffmpegserverqualitynumber80webm、jpg 的压缩质量0~100timeLimitnumber0到达 n 秒后自动停止并导出autoSaveTimenumber0每 n 秒自动分段下载防止内存撑爆workersPathstring—gif 格式所需的 worker 脚本路径五、踩坑与调优Q为什么录出来的动画节奏不对结论动画必须按时间差推进而不是每帧加固定值。把x v改成x v * dt时间钩子才能生效。Q长时间录制内存暴涨怎么办结论设置autoSaveTime4K 建议 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），仅供参考