1. 从标题拆解一个视频生成项目到底在做什么“Claude Opus 5.5 是怎么做出视频的”这个标题乍一看像是在问某个模型的能力边界但真正落到工程层面它问的其实是一件很具体的事一段视频怎么从零开始被程序化地生成出来。这里的关键词给了很明确的线索——程序、JS、Canvas。也就是说这不是在讨论视频剪辑软件怎么用而是在讨论用代码把一帧一帧的画面画出来再拼成一段可以播放的视频。我先把这个项目的核心逻辑说清楚。所谓“做出视频”在纯前端或 Node 环境下通常有两条路第一条是逐帧渲染 编码合成也就是用 Canvas 把每一帧画好导出成图片序列再用编码工具合成视频第二条是实时录制用 Canvas 持续绘制配合MediaRecorder或captureStream把画面实时抓下来。这个项目更偏向第一条路的思路因为标题里强调的是“怎么做出”而不是“怎么录出”前者更强调可控性和可复现性。这个内容适合谁来参考如果你写过 JavaScript用过 Canvas 画过图但对“怎么把画布变成视频”这件事没有完整概念那这篇就是写给你的。如果你是完全的新手也没关系我会把每一层原理拆开讲保证你能跟着走一遍。整个项目的价值不在于炫技而在于它把“视频”这个看起来很重的概念拆解成了帧、画布、时间轴、编码四个可以分别控制的模块一旦你理解了这套拆法做动画、做数据可视化视频、做程序化艺术都是同一套骨架。我先把整体思路摆出来后面再逐层展开。核心链路是这样的确定视频参数分辨率、帧率、时长→ 用 Canvas 按时间轴逐帧绘制 → 把每帧导出为图像数据 → 交给编码环节合成视频文件。每一步都有坑每一步也都有取舍下面我会把每个环节的选择理由和实操细节都讲透。2. 整体设计与思路拆解为什么是 Canvas 加逐帧渲染2.1 视频的本质一连串静态画面的快速切换很多人第一次做视频生成会下意识去找“有没有一个函数能直接生成视频”。这个思路方向就偏了。视频在计算机里的本质非常朴素它就是一秒钟内连续播放的几十张静态图片。人眼有视觉暂留当画面切换速度超过一定阈值大脑就会把它感知为连续运动。这个阈值通常认为是每秒 24 帧左右所以电影行业长期用 24fps而网络视频常用 30fps 或 60fps。理解这一点之后整个项目的设计就顺了。既然视频是图片序列那我要解决的问题就变成两个第一怎么高效地生成每一张图片第二怎么把这些图片按顺序打包成一个视频文件。第一个问题Canvas 是天然答案第二个问题交给编码环节。这个拆分是整个项目最核心的设计决策它把一个大问题切成了两个可以独立优化的小问题。为什么不用别的方案比如直接用某个视频编辑库的 API 去拼素材因为那样你就被库的能力边界锁死了。用 Canvas 逐帧画意味着每一帧的每一个像素你都能控制你想画什么就画什么想怎么变就怎么变。这种自由度是模板化工具给不了的。代价是你要自己管理时间轴和帧率但这个代价完全值得。2.2 为什么选 JavaScript 和 Canvas 这套组合选 JS 加 Canvas不是因为它最强大而是因为它最通用、最容易验证、最容易复现。你在浏览器里打开一个 HTML 文件就能跑不需要装任何环境你想搬到 Node 环境做批量渲染也有对应的 Canvas 实现。这种“先能跑起来再谈优化”的路径对做程序化视频这件事特别重要因为视频生成的调试周期很长你必须能快速看到某一帧画出来是什么样。Canvas 的绘制模型是即时模式也就是说你调用fillRect、arc、fillText这些方法它立刻就把像素画到画布上画完就不留记录。这和 SVG 那种保留对象模型的方式不同。即时模式的好处是性能可控、内存占用低适合逐帧重绘坏处是你想改某一帧的某个元素不能“找到那个元素改属性”只能重新画一遍。对于视频生成来说逐帧重绘本来就是标准做法所以即时模式反而是优势。还有一个现实原因Canvas 的 API 足够简单简单到你可以在脑子里推演每一帧长什么样。做视频最怕的就是“我改了一个参数结果整段视频全乱了”而 Canvas 的确定性绘制让你能精确预测每一帧的结果。这种可预测性是项目能稳定推进的基础。2.3 逐帧渲染与实时录制的取舍前面提到两条路这里展开说为什么逐帧渲染更适合这个项目。实时录制看起来更简单你只要让动画跑起来同时开着录制就行。但它有几个硬伤第一录制依赖真实时间如果某一帧绘制卡了录出来的视频就会掉帧或卡顿第二录制分辨率受限于窗口大小想要高分辨率就得放大窗口很别扭第三录制过程不可中断、不可重来一旦出错整段重录。逐帧渲染则完全相反。你可以把帧率设成 60但实际渲染速度可能是每秒 5 帧没关系因为渲染时间和播放时间是解耦的。你渲染 10 秒的视频哪怕花 10 分钟渲染最终输出的视频依然是流畅的 60fps。这种解耦带来的稳定性是做程序化视频的生命线。而且逐帧渲染天然支持“只重渲染第 300 到 400 帧”这种局部修正调试效率高得多。当然逐帧渲染也有代价你需要一个编码环节把图片序列合成视频这一步在纯浏览器环境里稍微麻烦一点。但这个问题有成熟的解法后面会详细讲。综合来看逐帧渲染的收益远大于成本所以这个项目选它。3. 核心细节解析与实操要点帧、时间轴与画布3.1 视频参数的确定分辨率、帧率、时长怎么定动手写代码之前先把三个参数定死分辨率、帧率、时长。这三个参数决定了总帧数而总帧数决定了整个渲染任务的工作量。计算公式很简单总帧数 帧率 × 时长秒比如你要做一段 10 秒、30fps 的视频总帧数就是 300 帧。如果你把帧率提到 60总帧数就变成 600渲染时间直接翻倍。所以帧率不是越高越好要看内容。如果是快速运动的画面60fps 更顺滑如果是缓慢变化的图形或文字动画30fps 完全够用甚至 24fps 也有电影感。分辨率的选择要考虑最终播放场景。1920×1080 是通用选择但如果你的视频主要在手机竖屏播放1080×1920 更合适。这里有个容易踩的坑Canvas 的尺寸和最终视频尺寸要一致否则要么被拉伸变形要么出现黑边。我建议一开始就把 Canvas 的宽高设成目标分辨率不要中途改。还有一个隐藏参数是每帧的时间戳。逐帧渲染时第 n 帧对应的时间是n / 帧率秒。这个时间戳要传给你的绘制函数让画面内容随时间变化。很多人写动画时用全局变量累加结果渲染速度一变动画节奏就乱了。正确做法是让绘制函数成为时间的纯函数给它一个时间 t它返回 t 时刻的画面不依赖任何外部状态。这样无论渲染快慢输出都是确定的。3.2 Canvas 绘制的核心方法从矩形到文字到图像Canvas 的绘制 API 很多但做视频生成常用的就那么几个。我把它们按用途分类方便你按需查用。用途核心方法说明填充矩形fillRect(x, y, w, h)最基础的绘制常用于背景和色块描边矩形strokeRect(x, y, w, h)画边框配合lineWidth控制粗细圆形与弧线arc(x, y, r, start, end)画圆、扇形、圆角配合fill或stroke路径绘制beginPath/moveTo/lineTo画任意多边形和折线文字fillText(text, x, y)配合font设置字号字体图像drawImage(img, x, y, w, h)把图片画到画布上支持缩放渐变createLinearGradient/createRadialGradient做背景渐变和光效变换translate/rotate/scale移动、旋转、缩放坐标系这里重点说几个容易出问题的地方。第一arc的角度单位是弧度不是度画整圆要用0到Math.PI * 2。第二drawImage在图像还没加载完时调用会静默失败必须等img.onload之后再画。第三fillText的坐标是文字基线的位置不是左上角想要精确对齐得配合textBaseline和textAlign调整。还有一个高级技巧用save和restore管理状态。当你做了旋转或缩放之后后续所有绘制都会受影响。在变换前调用ctx.save()变换后调用ctx.restore()就能把坐标系恢复原状。这个习惯能帮你避免大量“为什么后面的图形位置全错了”的困惑。3.3 时间轴驱动让画面随时间变化的正确姿势视频和静态图的唯一区别就是时间。所以绘制函数必须接收时间参数并根据时间决定画面内容。我推荐的结构是这样function drawFrame(ctx, time, duration) { // time 是当前时间秒duration 是总时长 const progress time / duration; // 0 到 1 的进度 // 根据 progress 计算各种动画参数 const x 100 progress * 800; const opacity Math.sin(progress * Math.PI); // 清空画布 ctx.clearRect(0, 0, width, height); // 绘制当前帧内容 ctx.globalAlpha opacity; ctx.fillStyle #3498db; ctx.fillRect(x, 200, 100, 100); ctx.globalAlpha 1; }这个结构的关键在于progress 这个归一化进度。它把时间映射到 0 到 1 之间所有动画都基于它计算。这样做的好处是你改总时长动画节奏会自动适配不用改任何动画代码。比如一个元素从左边移到右边你写x 100 progress * 800无论视频是 5 秒还是 50 秒它都会在整段视频里均匀移动。对于更复杂的动画可以用缓动函数让运动更自然。线性运动看起来机械加上缓动就有生命感。最简单的缓动是easeInOutfunction easeInOut(t) { return t 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t 2, 2) / 2; }把 progress 传进去出来的值再用于计算位置运动就会先慢后快再慢观感好很多。这个技巧在做数据可视化视频时特别有用因为观众需要时间看清起点和终点。4. 实操过程与核心环节实现从画布到视频文件4.1 环境搭建最小可运行的项目结构这个项目不需要复杂的构建工具一个 HTML 文件加一个 JS 文件就能跑起来。我建议的结构是这样project/ ├── index.html ├── render.js └── output/ 用于存放导出的帧或视频index.html里放一个 Canvas 元素和引入脚本!DOCTYPE html html head meta charsetutf-8 title视频生成/title /head body canvas idstage width1920 height1080/canvas script srcrender.js/script /body /htmlrender.js里写绘制逻辑。如果你要在浏览器里直接预览就把 Canvas 显示出来如果要做批量渲染可以把 Canvas 隐藏只在后台画。这个最小结构的好处是没有任何依赖你打开浏览器就能看到结果调试成本极低。如果你要做更长的视频或者需要自动化渲染可以把这个逻辑搬到 Node 环境用canvas这个 npm 包提供 Canvas 实现再用fluent-ffmpeg调用编码工具。但我的建议是先在浏览器里把画面调好确认每一帧都符合预期再考虑搬到 Node 做批量输出。因为浏览器里的调试反馈是最快的改一行代码刷新就能看到。4.2 逐帧渲染循环把时间轴走一遍渲染循环的核心就是遍历所有帧对每一帧调用绘制函数然后把画布内容保存下来。代码骨架如下const FPS 30; const DURATION 10; const TOTAL_FRAMES FPS * DURATION; const canvas document.getElementById(stage); const ctx canvas.getContext(2d); async function renderAllFrames() { for (let frame 0; frame TOTAL_FRAMES; frame) { const time frame / FPS; drawFrame(ctx, time, DURATION); // 导出当前帧 const blob await new Promise(resolve canvas.toBlob(resolve, image/png) ); // 保存或上传 blob await saveFrame(blob, frame); // 更新进度提示 console.log(已渲染 ${frame 1} / ${TOTAL_FRAMES}); } }这段代码有几个细节值得说。第一time frame / FPS保证了时间戳的精确性不会因为渲染速度而漂移。第二用toBlob而不是toDataURL因为toDataURL返回的是 base64 字符串体积比二进制大三分之一左右而且转换过程更慢。第三每一帧渲染完要await保存操作避免内存里堆积太多未处理的图像数据。如果你觉得逐帧await太慢可以改成批量处理先渲染一批帧存到内存再统一保存。但要注意内存占用1920×1080 的 PNG 每张大概几百 KB 到几 MB600 帧就是好几个 GB普通机器扛不住。所以边渲染边保存是更稳妥的做法虽然慢一点但不会爆内存。4.3 编码合成把图片序列变成视频文件图片序列有了接下来要合成视频。这一步在浏览器里做比较受限最实用的方案是导出帧序列用外部工具编码。具体流程是把每一帧保存成frame_0001.png、frame_0002.png这样的命名然后用编码工具把这些图片按顺序合成视频。用命令行工具编码的典型命令是这样的ffmpeg -framerate 30 -i frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4这里每个参数都有讲究。-framerate 30指定输入帧率要和你的渲染帧率一致。-i frame_%04d.png是输入模式%04d表示四位数字编号对应你的文件命名。-c:v libx264指定用 H.264 编码这是兼容性最好的视频编码。-pix_fmt yuv420p指定像素格式这个参数非常重要不加的话很多播放器打不开因为默认可能是 yuv444 这种不通用的格式。如果你在浏览器里想直接生成视频可以用MediaRecorder配合canvas.captureStream()。思路是创建一个离屏的流把 Canvas 的内容推进去然后录制。但这种方式本质还是实时录制受渲染速度影响。折中方案是用captureStream(0)手动控制帧的推送这样就能把逐帧渲染和录制结合起来既保证画面质量又保证时间准确。这个技巧稍微进阶但值得掌握。4.4 参数计算实例一段 10 秒视频的完整参数表为了让你有直观感受我把一段 10 秒视频的所有参数列出来你可以直接照着改。参数取值计算依据分辨率1920×1080通用高清标准帧率30 fps网络视频常用流畅度足够时长10 秒示例时长总帧数300 帧30 × 10单帧时间间隔0.0333 秒1 / 30预估文件大小5-15 MB取决于画面复杂度渲染耗时1-5 分钟取决于机器性能和画面复杂度这里要提醒一点渲染耗时和视频时长不是线性关系。因为每一帧的绘制复杂度可能不同有些帧画得慢有些画得快。如果你的动画里有大量文字渲染或复杂路径整体渲染时间会明显拉长。我建议先用低分辨率比如 640×360快速渲染一遍确认动画节奏没问题再切到高分辨率正式渲染。这个“先粗后精”的流程能帮你省下大量等待时间。5. 常见问题与排查技巧实录5.1 画面模糊、锯齿严重怎么办这是新手最常遇到的问题。原因通常有三个第一Canvas 的宽高属性和 CSS 宽高不一致导致浏览器做了缩放第二绘制时没有考虑设备像素比在高分屏上显得模糊第三线条没有对齐到像素网格导致抗锯齿把线糊掉。解决办法分情况。如果是 Canvas 尺寸问题确保canvas.width和canvas.height设成你想要的真实像素值CSS 里的宽高要么不设要么设成和属性值一样的逻辑尺寸。如果是高分屏模糊可以按设备像素比放大 Canvasconst dpr window.devicePixelRatio || 1; canvas.width 1920 * dpr; canvas.height 1080 * dpr; canvas.style.width 1920px; canvas.style.height 1080px; ctx.scale(dpr, dpr);如果是线条模糊把坐标加上 0.5 的偏移让线条落在像素中心而不是边界上。这个技巧在画细线时特别明显加不加 0.5 的观感差别很大。5.2 渲染到一半卡死或内存溢出长视频渲染最容易遇到这个问题。根本原因是图像数据没有及时释放。如果你把每一帧都存到数组里几百帧之后内存就爆了。解决办法是每帧处理完就释放引用不要累积。另一个原因是toBlob是异步的如果你在循环里疯狂调用而不等待会瞬间产生大量待处理的 blob把内存撑爆。所以一定要await每一次保存操作让处理速度跟上生成速度。还有一个隐蔽的坑Canvas 本身占用的内存。1920×1080 的 Canvas 每帧的像素数据大约是 8MB1920×1080×4 字节如果同时开多个 Canvas 做并行渲染内存消耗会成倍增长。我的建议是单 Canvas 串行渲染虽然慢但稳。想要提速宁可优化单帧绘制逻辑也不要盲目开并行。5.3 视频播放时卡顿或不同步如果合成出来的视频播放卡顿先检查帧率参数是否一致。渲染时用的帧率和编码时指定的帧率必须相同否则视频会被拉伸或压缩导致卡顿。比如你按 30fps 渲染了 300 帧编码时却写-framerate 60那视频就会变成 5 秒动作快一倍。如果视频和音频不同步假设你有音频那问题通常出在音频编码上。但纯画面视频不存在这个问题所以这个项目里可以忽略。如果你后续要加音频记住音频和视频要分别编码再合并不要试图一次性搞定。还有一个可能是播放器的问题。有些播放器对某些编码格式支持不好换个播放器试试。如果换了播放器还是卡那大概率是编码参数的问题重点检查-pix_fmt和-profile这两个参数。5.4 常见问题速查表现象可能原因排查方向画面模糊Canvas 尺寸与 CSS 不一致检查 width/height 属性线条锯齿坐标未对齐像素坐标加 0.5 偏移渲染卡死内存堆积及时释放帧数据await 保存视频卡顿帧率不一致渲染和编码帧率对齐播放器打不开像素格式不兼容加-pix_fmt yuv420p动画节奏乱依赖外部状态改成时间的纯函数文字位置偏基线对齐问题设置 textBaseline图像不显示未等加载完成在 onload 后绘制5.5 几个我踩过的坑和独家技巧第一个坑是浮点数累积误差。如果你用time 1/30这种方式累加时间跑几百帧之后误差会累积导致最后一帧的时间对不上。正确做法是用time frame / FPS直接计算避免累加。第二个坑是颜色空间。Canvas 默认用 sRGB但编码时如果不指定可能被当成别的颜色空间处理导致颜色偏暗或偏艳。解决办法是在编码时明确指定颜色参数或者干脆在渲染时就按目标颜色空间来画。第三个技巧是预渲染静态元素。如果你的背景是固定的不要每帧都重画一遍而是先画到一个离屏 Canvas 上之后每帧直接drawImage把离屏 Canvas 贴过来。这个优化在复杂背景下能省下大量时间。第四个技巧是用进度条和日志监控渲染。长视频渲染可能要跑很久没有进度反馈会让人焦虑。我习惯每渲染 10 帧打印一次进度和预估剩余时间这样心里有数也方便发现异常。6. 内容延展这套骨架还能做什么这套“时间轴驱动 Canvas 逐帧绘制 编码合成”的骨架一旦跑通能做的事情远超你的想象。最直接的是数据可视化视频把一组数据按时间展开每一帧画一个状态就能做出动态的图表演变。这种视频在汇报和科普场景里特别有说服力因为观众能看到数据是怎么一步步变化的。再往上是程序化艺术。用数学函数控制图形的位置、颜色、大小让它们随时间演化能生成非常有意思的抽象动画。这类作品的特点是参数一改整个视频的风格就变了非常适合做系列作品。你可以把参数抽出来做成配置一次渲染多个版本。还有一个实用方向是批量生成个性化视频。比如给每个用户生成一段带他名字和数据的短视频模板固定只是变量不同。这种需求在营销和运营场景里很常见用这套骨架做改几个参数就能批量输出效率比手工剪辑高几个数量级。我个人在实际操作中的体会是先把一帧画好再考虑时间。很多人一上来就想做复杂动画结果画面本身都没调好时间轴一加就更乱。正确的顺序是先写一个静态的绘制函数把画面调到满意再引入时间参数让画面动起来最后才是批量渲染和编码。这个顺序能帮你把问题一层层剥开每一步都稳。最后再分享一个小技巧把绘制函数写成可配置的。分辨率、帧率、时长、颜色、速度这些参数都抽成配置对象不要硬编码在函数里。这样你想换个风格改配置就行不用动绘制逻辑。这个习惯在项目变大之后会救你很多次因为你会发现“改一个参数看效果”比“改代码看效果”快太多了。