Canvas 动画录制成高清视频完整指南：CCapture.js 快速上手

Canvas 动画录制成高清视频完整指南：CCapture.js 快速上手

【免费下载链接】ccapture.jsA library to capture canvas-based animations at a fixed framerate项目地址: https://gitcode.com/gh_mirrors/cc/ccapture.js

如果你用 Canvas 写了一个粒子动画，想把它录成高清视频，直接开系统录屏往往只得到一顿一顿的画面——分辨率越高，掉帧越狠。CCapture.js 做的事情是：按固定帧率捕获 Canvas 动画。它把"录制"和"实时"解耦了，哪怕某一帧渲染要好几秒，最后拼出来的视频依然是稳稳的 30 或 60 fps。

为什么录屏满足不了你？

先说下你会在什么情况下需要它：

• 想导出 4K 视频，但显卡撑不住这个分辨率的实时帧率；
• 想从 10 万粒子直接怼到 1000 万；
• 想把所有画质设置拉到最高再录。

实时录屏在这几种场景下都只能得到卡顿视频。CCapture.js 的思路是"暂停时钟"：它接管了Date.now、setTimeout、requestAnimationFrame、performance.now这些取时间的方法，让它们表现得像"每帧经过的时间恒定"，恒定量由你指定的帧率决定。所以渲染再慢，视频也照样丝滑，甚至能录 240fps 再去后期软件里做运动模糊。

有一个前提要注意：你的动画必须按"经过时间"推进，而不是每帧加固定值。也就是说位移、旋转要用 deltaTime 去算。如果你本来就用requestAnimationFrame加时间差写循环，那基本零成本满足。

最快安装方法

装好只需要一步。两种方式任选：

npm install ccapture.js

不想用 npm？直接在 HTML 里引<script>标签也行：主文件是src/CCapture.js，按你要导出的格式追加对应编码器即可——webm-writer-0.2.0.js管 WebM，gif.js管 GIF，tar.js管 PNG/JPEG 序列，download.js让下载更省心。也可以直接引全量打包版CCapture.all.min.js，一个标签搞定，或者用 bower 安装同名包。

最小示例：4 行核心代码跑通录制

流程是固定的四步：建对象 →start()→ 每帧capture(canvas)→stop()+save()。

var capturer = new CCapture({ format: 'webm', framerate: 30 }); capturer.start(); function render() { requestAnimationFrame(render); // 这里绘制你的动画 capturer.capture(canvas); } render();

动画播完后调用capturer.stop()，再capturer.save()，浏览器就会自动下载一个{文件名}.webm。save()也可以传回调，拿到 blob 自己处理。另外save()不要求先stop()——随时调用，都会把"到这一刻为止"的帧打包下载，方便随时预览。

参数速查：按需求选格式和画质

构造器参数决定一切，最常用的几个：

避坑指南：这些细节决定录制成败

⚠️start()之后时间 API 就不是"原来的味道"了。setTimeout、requestAnimationFrame会按固定时间步长走，所以务必确保动画循环在 start 之前已经跑起来，否则动画直接卡死。

• WebM 基本是 Chrome 专属：底层 WebM Writer 依赖 webp 支持，其他浏览器目前指望不上，跨浏览器需求建议走 PNG 序列。
• GIF 别贪多：gif.js 编码帧数多时性能有限，长动画优先 webm。
• 长录制记得autoSaveTime：各浏览器对大内存块和大下载（比如超 1GB）各有脾气，分段能救命。4K 捕获建议每段 10~30 秒，文件名会是{name}-part-xxxxx，TAR 里的图片自带连续序号。
• 内存不降反升：个别浏览器不回收攒下的帧。Chrome 可以用--js-flags="--expose-gc"启动，CCapture 会每帧手动gc()，内存曲线立刻平稳。

和 Three.js、Pixi.js、WebGL 怎么配合

它捕获的对象只是一个 canvas，所以上层引擎随便换：

• Three.js：项目自带一个 Three.js 做的 3D 生命游戏 demo（examples/basic/），在 render 结尾把renderer.domElement传给capture()就能录 3D 动画；
• Pixi.js：同样把渲染器的 canvas 丢给capture()，适合录 2D 游戏和动画；
• 原生 WebGL：WebGL canvas 本质还是 canvas，捕获方式完全一致，复杂着色器动画通吃。

常见疑问

• 为什么不直接录屏？录屏受限于实时帧率，录不了 4K + 高粒子；CCapture.js 是离线逐帧编码，帧率和画质互不拖累。
• 能做慢动作/快动作吗？能，改framerate就行：低帧率录、正常播是快进；高帧率录（比如 120/240fps）放常规播放器就是慢动作。
• PNG/JPG 导出来是视频吗？不是，是装逐帧图片的 TAR 包，适合丢给离线合成软件当素材。
• GIF 报错？九成是忘了配workersPath。

一句话总结：动画跑得动、但录不下来高清视频的场合，给它挂上 CCapture.js，逐帧慢慢画，视频照样流畅。

【免费下载链接】ccapture.jsA library to capture canvas-based animations at a fixed framerate项目地址: https://gitcode.com/gh_mirrors/cc/ccapture.js