Claude Opus 5.5 如何用 Canvas 与 FFmpeg 生成视频？

1. 从标题说起：一个模型怎么“做”出视频

第一次看到“Claude Opus 5.5 是怎么做出视频的”这个标题，我脑子里冒出来的第一个念头是：它到底是在“生成视频”，还是在“用代码把视频拼出来”？这两个方向差别很大。前者是模型直接输出像素帧序列，后者是模型写代码，代码再去驱动浏览器或命令行工具把画面和声音合成出来。结合热搜词里反复出现的 JS、Canvas、FFmpeg 这几个关键词，我基本可以判断，这里说的“做视频”，大概率是后者——模型负责写逻辑、写渲染、写合成脚本，真正干活的还是 Canvas 和 FFmpeg 这套老搭档。

这个思路其实很务实。直接让模型吐视频帧，成本高、可控性差、分辨率一上去就崩；而让模型写一段可运行的渲染代码，你就能在本地反复调、反复改，最后用 FFmpeg 把帧序列压成 mp4。整条链路是透明的，每一帧怎么来的你都能查。适合谁来参考？我觉得三类人最合适：一是想用 AI 辅助做动画或数据可视化的前端，二是想批量生成短视频素材的运营或内容创作者，三是单纯好奇“模型写代码做视频”到底靠不靠谱的技术爱好者。下面我就按我自己的理解，把这条链路从头到尾拆一遍。

2. 整体设计思路：为什么是 Canvas 加 FFmpeg 这套组合

2.1 模型负责“写”，不负责“渲染”

很多人对“AI 做视频”有个误解，以为模型会直接输出一段视频文件。实际用下来，更稳的做法是让模型输出可执行的渲染脚本。原因很简单：视频本质是“一帧一帧的图片按时间轴排列”，而生成单帧图片这件事，用代码画比用模型猜要精确得多。模型擅长的是把“我要一个蓝色背景、中间有个跳动的小球、右下角有文字”这种自然语言描述，翻译成 Canvas 的绘制指令。它不需要理解像素，只需要理解 API。

我试过让模型直接描述每一帧的画面，结果就是帧与帧之间不连贯，小球的位置会跳。后来改成让它写一个requestAnimationFrame循环，用时间变量t去算小球位置，连贯性问题一下就没了。这就是“写代码”和“生成画面”的本质区别：代码里有状态、有函数、有数学关系，画面自然就连续了。

2.2 Canvas 负责“画”，浏览器负责“跑”

Canvas 是浏览器里的一块画布，你可以用 JS 在上面画线、画圆、贴图、写字。它的优势是即时反馈——写完代码刷新页面就能看到效果，调颜色、调位置、调动画曲线都非常快。对于做视频来说，Canvas 还有一个隐藏好处：它可以通过canvas.toDataURL()或captureStream()把每一帧导出来。导出成图片序列之后，FFmpeg 就能接手了。

这里有个关键选择：是用captureStream()实时录制，还是逐帧导出图片？我两种都试过。实时录制的问题是帧率不稳定，浏览器卡一下就会丢帧，最后视频会一卡一卡的。逐帧导出虽然慢一点，但每一帧都是确定的，压出来的视频丝滑得多。所以如果你追求质量，我建议走“逐帧导出 PNG 序列，再用 FFmpeg 合成”这条路。

2.3 FFmpeg 负责“合”，把帧变成视频

FFmpeg 是视频处理领域的万能工具，把一堆图片按顺序压成视频，对它来说就是一条命令的事。核心命令大概长这样：

ffmpeg -framerate 30 -i frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4

这条命令的意思是：以每秒 30 帧的速率，读取frame_0001.png、frame_0002.png这样的序列，用 H.264 编码，输出成兼容性最好的 mp4。-pix_fmt yuv420p这个参数特别重要，不加的话有些播放器会显示不了。我第一次做的时候就是漏了这个，结果视频在本地能播，发到手机上就是黑屏，排查了半天才发现是像素格式的问题。

2.4 为什么不让模型直接调 FFmpeg

有人会问，既然模型能写代码，为什么不直接让它写 FFmpeg 命令？答案是：可以，但不够。FFmpeg 只能处理已有的素材，它不会“无中生有”地画出画面。所以整条链路必须是“Canvas 生成素材 → FFmpeg 合成视频”。模型的价值在于把这两步都自动化：它既写 Canvas 的绘制逻辑，也写 FFmpeg 的合成脚本，甚至还能写一个 Node.js 脚本把两步串起来。这才是“模型做视频”的完整含义。

3. 核心细节解析：Canvas 渲染与 FFmpeg 合成的关键点

3.1 Canvas 逐帧导出的正确姿势

逐帧导出听起来简单，但有几个坑必须提前说。第一，不要用setInterval控制帧，因为它的时间精度不够，容易导致帧与帧之间的时间间隔不均匀。正确做法是用一个循环，手动计算每一帧对应的时间t，然后调用绘制函数，再导出。伪代码大概是这样：

const totalFrames = 300; // 10秒 * 30帧 const fps = 30; for (let i = 0; i < totalFrames; i++) { const t = i / fps; drawScene(t); // 根据时间t绘制画面 const dataURL = canvas.toDataURL('image/png'); saveFrame(dataURL, i); // 保存为 frame_0001.png }

第二，toDataURL是同步的，帧数一多浏览器会卡死。解决办法是分批次导出，或者用canvas.toBlob()配合异步保存。我一般会把总帧数控制在 300 到 600 之间，也就是 10 到 20 秒的视频，再长就分段做，最后用 FFmpeg 拼接。

第三，分辨率别贪大。1080p 的 Canvas 导出 PNG，一帧大概 2 到 3 MB，600 帧就是 1.5 GB 左右。如果你的硬盘不够快，导出过程会非常痛苦。我通常先用 720p 做预览，确认动画没问题了，再切到 1080p 正式导出。

3.2 动画的时间函数怎么设计

视频好不好看，很大程度上取决于动画的“节奏”。线性运动看起来很机械，加入缓动函数就会自然很多。比如小球弹跳，可以用Math.sin或者二次函数来模拟重力。下面这个缓动函数是我常用的：

function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); }

它的效果是“开始快、结尾慢”，适合做元素入场。反过来easeInCubic适合出场。如果你想让动画有“回弹”效果，可以用easeOutBack。这些函数都不复杂，但能让画面质感提升一个档次。模型在写代码的时候，如果你在提示词里明确说“用 easeOutCubic 做入场”，它一般都能正确实现。

3.3 FFmpeg 参数里的门道

FFmpeg 的命令行参数很多，但做图片序列合成视频，真正需要关心的就那么几个。我整理了一个对照表，方便你按需调整：

-crf这个参数值得多说一句。它的全称是“恒定速率因子”，范围是 0 到 51。0 是无损，但文件巨大；51 是画质最差。我一般用 18 到 20，肉眼几乎看不出压缩痕迹，文件大小也还能接受。如果你做的是文字较多的画面，建议用 16 到 18，因为文字边缘的压缩瑕疵比较明显。

3.4 音频怎么加进去

纯画面视频看起来会比较干，加个背景音乐或者音效会好很多。FFmpeg 加音频有两种方式：一种是合成视频时直接混入，另一种是后期再合并。我推荐后者，因为调起来方便。合并命令如下：

ffmpeg -i video.mp4 -i audio.mp3 -c:v copy -c:a aac -shortest output.mp4

-c:v copy表示视频流不重新编码，直接复制，速度快；-c:a aac表示音频用 AAC 编码；-shortest表示以较短的流为准，避免音频比视频长导致黑屏。这个命令我用了无数次，基本没出过问题。

4. 实操过程：从零做一段 10 秒动画视频

4.1 第一步：搭一个最小的 Canvas 页面

先建一个index.html，里面放一个 Canvas 和一个导出按钮。代码不用复杂，能画东西就行：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas 视频导出</title> </head> <body> <canvas id="stage" width="1280" height="720"></canvas> <button id="export">导出帧序列</button> <script src="render.js"></script> </body> </html>

这里我把 Canvas 尺寸设成 1280x720，也就是 720p。如果你想做竖屏视频，改成 720x1280 就行。注意 Canvas 的width和height属性是绘图分辨率，和 CSS 里的显示尺寸是两回事，别搞混了。

4.2 第二步：写绘制逻辑

在render.js里，我定义一个drawScene(t)函数，t是当前时间（秒）。比如画一个从左到右移动的圆：

const canvas = document.getElementById('stage'); const ctx = canvas.getContext('2d'); function drawScene(t) { // 清空画布 ctx.fillStyle = '#1a1a2e'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 计算圆的位置 const progress = Math.min(t / 5, 1); // 5秒内完成移动 const x = 100 + progress * (canvas.width - 200); const y = canvas.height / 2; // 画圆 ctx.beginPath(); ctx.arc(x, y, 60, 0, Math.PI * 2); ctx.fillStyle = '#e94560'; ctx.fill(); // 画文字 ctx.fillStyle = '#ffffff'; ctx.font = '48px sans-serif'; ctx.fillText('Claude Opus 5.5', 100, 100); }

这段代码里，progress用Math.min限制在 0 到 1 之间，保证圆不会跑出画布。文字用的是系统无衬线字体，兼容性最好。如果你想用自定义字体，记得等字体加载完再开始导出，否则第一帧可能是默认字体。

4.3 第三步：逐帧导出并保存

浏览器里没法直接写文件，所以我的做法是：每导出 30 帧，打包成一个 zip 下载，或者用 Node.js 起一个本地服务接收数据。如果你不想折腾，最简单的办法是用canvas.toDataURL()生成图片，然后手动右键保存——但 300 帧手动保存会疯掉。所以我推荐用 Node.js 配合puppeteer做自动化，或者直接用CCapture.js这个库，它能直接把 Canvas 帧录成视频。

不过CCapture.js底层还是用 WebM 编码，画质和兼容性不如 FFmpeg。我的折中方案是：用 Puppeteer 打开页面，在页面里逐帧调用drawScene，然后用page.screenshot()截图保存。这样每一帧都是 PNG，质量有保证。Puppeteer 的代码大概是这样：

const puppeteer = require('puppeteer'); const fs = require('fs'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.setViewport({ width: 1280, height: 720 }); await page.goto('file://' + __dirname + '/index.html'); const fps = 30; const duration = 10; const totalFrames = fps * duration; for (let i = 0; i < totalFrames; i++) { const t = i / fps; await page.evaluate((time) => { drawScene(time); }, t); await page.screenshot({ path: `frames/frame_${String(i).padStart(4, '0')}.png` }); } await browser.close(); })();

这段代码的关键是page.evaluate，它能在页面上下文里执行drawScene。padStart(4, '0')保证文件名是frame_0000.png这种格式，FFmpeg 才能正确识别序列。

4.4 第四步：用 FFmpeg 合成视频

帧序列导出完之后，打开终端，进入frames目录的上一级，执行：

ffmpeg -framerate 30 -i frames/frame_%04d.png -c:v libx264 -pix_fmt yuv420p -crf 18 output.mp4

等几秒钟，output.mp4就出来了。你可以用播放器打开看看效果。如果发现视频速度不对，检查-framerate是不是和导出时的 fps 一致。如果发现画面颜色偏了，检查-pix_fmt是不是yuv420p。这两个问题我几乎每次做新项目都会遇到一次，现在已经成为肌肉记忆了。

4.5 第五步：加背景音乐并做最终输出

假设你有一个bgm.mp3，执行：

ffmpeg -i output.mp4 -i bgm.mp3 -c:v copy -c:a aac -shortest final.mp4

这样final.mp4就是带声音的完整视频了。如果你想让音乐淡入淡出，可以加afade滤镜：

ffmpeg -i output.mp4 -i bgm.mp3 -c:v copy -c:a aac -af "afade=t=in:st=0:d=2,afade=t=out:st=8:d=2" -shortest final.mp4

afade=t=in:st=0:d=2表示从第 0 秒开始，用 2 秒淡入；afade=t=out:st=8:d=2表示从第 8 秒开始，用 2 秒淡出。这个细节能让视频看起来专业不少。

5. 常见问题与排查技巧实录

5.1 导出的视频在手机上黑屏

这是最经典的问题，原因几乎都是像素格式不对。H.264 编码的视频，如果像素格式是yuv444p或yuvj420p，很多手机播放器不支持。解决办法就是加-pix_fmt yuv420p。如果你已经生成了视频，可以用下面这条命令重新编码：

ffmpeg -i input.mp4 -c:v libx264 -pix_fmt yuv420p -crf 18 output.mp4

5.2 帧序列命名不对导致 FFmpeg 报错

FFmpeg 对图片序列的命名有严格要求，必须是连续的编号，比如frame_0001.png、frame_0002.png。如果你导出的是frame_1.png、frame_2.png，FFmpeg 会找不到文件。解决办法是用padStart补零，或者在 FFmpeg 命令里用-start_number指定起始编号。我一般统一用四位补零，从0000开始，这样最省心。

5.3 导出速度太慢怎么办

逐帧截图确实慢，尤其是 1080p 分辨率。我的优化经验是：第一，把 Puppeteer 的screenshot改成canvas.toDataURL然后在 Node.js 里写文件，能快不少；第二，用page.evaluate一次性导出多帧的数据，减少通信次数；第三，如果只是预览，把分辨率降到 640x360，速度会快好几倍。正式导出再切回高分辨率。

5.4 动画看起来不流畅

如果帧率是 30，但动画看起来还是一顿一顿的，可能是绘制逻辑里用了整数运算，导致位置变化不连续。解决办法是把位置计算改成浮点数，Canvas 会自动做抗锯齿。另外，避免在每一帧里重新创建对象或加载图片，这些操作很耗时，会导致帧率波动。

5.5 常见问题速查表

6. 一些实操心得和扩展思路

6.1 提示词怎么写才能让模型输出可用的代码

如果你想让模型帮你写渲染代码，提示词里最好包含这几个要素：画布尺寸、帧率、总时长、动画元素、运动方式、配色方案。比如：“用 Canvas 写一个 1280x720 的动画，30 帧每秒，总长 10 秒，画面中间有一个红色圆球从左到右匀速移动，背景深蓝色，左上角有白色文字。”这样模型输出的代码基本能直接跑。如果你只说“做个视频”，它可能会给你一堆伪代码或者不完整的片段。

6.2 用数据驱动画面变化

Canvas 做视频的一个强大之处是，你可以把数据映射成视觉元素。比如你有一组销售数据，可以让柱状图的高度随时间增长；或者你有一组地理位置，可以让点在地图上依次亮起。这种“数据可视化视频”在汇报和传播中非常有用。模型可以帮你写数据映射的逻辑，你只需要提供数据格式。

6.3 批量生成的思路

如果你需要生成很多条类似的视频，比如每天一条数据播报，可以把整个流程脚本化：用 Node.js 读取数据，生成对应的 Canvas 页面，用 Puppeteer 导出帧，再调 FFmpeg 合成。模型可以帮你写这个脚本的骨架，你只需要替换数据源和模板。这样一套流程跑通之后，每天的视频生成就是一条命令的事。

6.4 关于“模型直接生成视频”的边界

最后说一点我的观察。目前让模型直接输出视频帧序列，在短片段、低分辨率、简单画面上是可行的，但一旦涉及复杂场景、长时长、高分辨率，质量和稳定性都会明显下降。而“模型写代码 + Canvas 渲染 + FFmpeg 合成”这条路，虽然多了一步，但可控性和可复现性都强得多。我个人在实际操作中的体会是：把模型当成一个“会写渲染代码的助手”，而不是“会画视频的画家”，整个流程会顺畅很多。你得到的不仅是一段视频，还有一套可以反复修改、反复运行的代码，这才是最有价值的部分。