HTML5 动画无法直接导出为MP4，必须通过captureStream+MediaRecorder录webm再后端转码，或用ffmpeg.wasm前端编码；关键需设置yuv420p像素格式和对齐帧率。
HTML5 <canvas></canvas> 动画怎么导出为 MP4
不能直接导出。浏览器的 <canvas></canvas> 是绘制上下文，不是视频轨道，没有内置“保存为 MP4”功能。你得把每一帧画出来，再交给编码器处理。
常见错误现象：canvas.toDataURL() 只能生成 PNG/JPEG，一堆图片 ≠ MP4；用 MediaRecorder 录制 <canvas></canvas> 时黑屏或报错 InvalidStateError: The MediaRecorder is not in the "recording" state，多半是没正确绑定 captureStream() 或流没激活。
- 必须先调用
canvas.captureStream(fps)获取MediaStream，这是唯一合法入口 - 帧率
fps建议设为整数（如30），和动画循环（requestAnimationFrame）节奏对齐，否则丢帧或卡顿 -
MediaRecorder只支持video/webm（Chrome/Edge）或video/mp4（Safari），但 Safari 的video/mp4实际只支持 H.264 + AAC，且必须传{mimeType: 'video/mp4'}，否则默认 fallback 到 webm - 导出 MP4 最稳的路径是：canvas →
captureStream→MediaRecorder（webm）→ 后端转码，或前端用ffmpeg.wasm
用 ffmpeg.wasm 在前端合成 MP4
这是目前唯一能在纯前端把 canvas 动画变成真正 MP4 的可行方案，绕开了浏览器编码限制。但它不是“点一下就导出”，而是把 FFmpeg 编译成 WebAssembly，在内存里跑编码流程。
使用场景：需要用户离线导出、不依赖后端、且能接受几秒到几十秒的编码等待（尤其长动画）。
立即学习“前端免费学习笔记（深入）”；
- 必须预加载
ffmpeg-core.js和 wasm 文件，首次运行有明显延迟，建议在页面初始化时就FFmpeg.load() - 每帧要先用
canvas.toDataURL('image/png')或canvas.getContext('2d').getImageData()提取像素，再写入 ffmpeg 的虚拟文件系统（ffmpeg.FS('writeFile', ...)） - 命令行参数关键：用
-framerate 30 -i %06d.png -c:v libx264 -pix_fmt yuv420p out.mp4，其中%06d.png对应你存的 000001.png、000002.png…，yuv420p是 MP4 兼容必需的像素格式，漏了会导致 iOS 播放失败 - 内存吃紧：100 帧 1080p 图片可能占 300MB+ 内存，超时或 OOM 很常见，务必加
try/catch和进度提示
为什么不用 MediaRecorder 直出 MP4
因为规范没强制要求浏览器实现 MP4 编码。Chrome 和 Edge 默认只支持 webm（VP8/VP9），即使你传 mimeType: 'video/mp4'，它们也大概率忽略并回退到 webm —— 这不是 bug，是 spec 允许的行为。
错误现象：new MediaRecorder(stream, {mimeType: 'video/mp4'}) 创建成功，但 ondataavailable 拿到的 blob type 是 video/webm；或者直接抛 TypeError: Failed to construct 'MediaRecorder': Invalid mimeType。
- Safari 是例外，它支持
video/mp4，但仅限于 macOS/iOS 15.4+，且只认 H.264 baseline profile，高码率或 B-frame 会失败 - 别信“改
mimeType就能导 MP4”的教程，那是混淆了容器封装和编码器能力 - 如果只要快速分享，webm 本身完全可用（Chrome/Firefox/Safari 都支持），MP4 并非刚需
后端转码才是生产环境推荐路径
前端生成一堆 PNG 或 webm，发给后端，用 FFmpeg 命令行转 MP4，稳定、可控、兼容性好。前端只管“录”，后端只管“压”。
使用场景：用户量大、动画时长不确定、需统一控制码率/分辨率/关键帧间隔。
- 前端上传前，用
canvas.toBlob()批量导出 PNG，打包成 ZIP 发送，比 base64 节省 33% 体积 - 后端接收后，用
ffmpeg -framerate 30 -i %06d.png -c:v libx264 -crf 23 -preset fast -movflags +faststart out.mp4，-crf 23是视觉无损与体积的平衡点，-movflags +faststart让 MP4 支持网页边下边播 - 别忽略错误处理：PNG 序号断档、帧率不一致、磁盘满，这些都会让 FFmpeg 静默失败
真要导 MP4，核心就一条：浏览器不负责编码，它只负责喂数据。怎么喂、谁来编、编完怎么修，得自己一层层理清楚。最容易被忽略的是像素格式（yuv420p）和时间基（timebase）对齐——这两样错了，MP4 文件可能能生成，但 iOS 里就是黑屏。
