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管 WebMgif.js管 GIFtar.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()——随时调用都会把到这一刻为止的帧打包下载方便随时预览。参数速查按需求选格式和画质构造器参数决定一切最常用的几个参数作用formatwebm/gif/png/jpg/ffmpegserver视频选 webm短动画选 gif要逐帧素材选 png/jpg打成 TAR 包framerate目标帧率默认 60qualitywebm / jpg 的编码质量name导出文件名不传就随机 GUIDmotionBlurFrames超采样帧数做运动模糊0 或 1 无效timeLimit录到指定秒数自动停并下载长任务设好就去睡觉autoSaveTime每 n 秒自动分段下载一次仅 webm/png/jpgstartTime从第几秒开始录workersPathGIF 必须指定指向gif.worker.js所在目录verbose/display控制台打日志 / 页面加个信息小挂件避坑指南这些细节决定录制成败⚠️start()之后时间 API 就不是原来的味道了。setTimeout、requestAnimationFrame会按固定时间步长走所以务必确保动画循环在 start 之前已经跑起来否则动画直接卡死。WebM 基本是 Chrome 专属底层 WebM Writer 依赖 webp 支持其他浏览器目前指望不上跨浏览器需求建议走 PNG 序列。GIF 别贪多gif.js 编码帧数多时性能有限长动画优先 webm。长录制记得autoSaveTime各浏览器对大内存块和大下载比如超 1GB各有脾气分段能救命。4K 捕获建议每段 10~30 秒文件名会是{name}-part-xxxxxTAR 里的图片自带连续序号。内存不降反升个别浏览器不回收攒下的帧。Chrome 可以用--js-flags--expose-gc启动CCapture 会每帧手动gc()内存曲线立刻平稳。和 Three.js、Pixi.js、WebGL 怎么配合它捕获的对象只是一个 canvas所以上层引擎随便换Three.js项目自带一个 Three.js 做的 3D 生命游戏 demoexamples/basic/在 render 结尾把renderer.domElement传给capture()就能录 3D 动画Pixi.js同样把渲染器的 canvas 丢给capture()适合录 2D 游戏和动画原生 WebGLWebGL 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考