HTML5无法直接导出网页动画为视频，但可通过MediaRecorder录制Canvas动画流：先将动画渲染到canvas，调用captureStream()获取媒体流，再用MediaRecorder录制为WebM格式，最后合并Blob并下载。
HTML5本身不支持直接“导出”网页动画为视频，但可以通过MediaRecorder接口录制Canvas上的动画过程，生成可下载的视频文件。关键在于把动画内容渲染到<canvas>，再用captureStream()转为媒体流进行录制。
确保Canvas动画可被录制
网页动画必须绘制在<canvas>上（如使用requestAnimationFrame、SVG转Canvas或html2canvas快照序列），静态DOM或CSS动画无法被captureStream捕获。
- 设置canvas宽高与目标画面一致，避免缩放失真
- 动画循环中每帧调用
ctx.drawImage()或重绘逻辑，保证流内容实时更新 - 调用
canvas.captureStream(fps)（如30）获取MediaStream，这是录制前提
用MediaRecorder录制Canvas流
拿到Canvas流后，创建MediaRecorder实例并开始录制。注意格式兼容性：WebM（VP8/VP9）是浏览器原生支持最广的格式。
- 初始化时指定mimeType：
video/webm或更明确的video/webm;codecs=vp8 - 监听
ondataavailable事件，将每次产生的Blob存入数组 - 调用
recorder.start()启动，recorder.stop()结束（可手动触发或设定时长）
合并片段并触发下载
录制停止后，所有分片Blob需合并为一个完整视频文件，并生成可下载链接。
立即学习“前端免费学习笔记（深入）”；
- 用
new Blob(chunks, { type: 'video/webm' })合成最终Blob - 通过
URL.createObjectURL(blob)生成临时URL - 创建
<a>标签，设置href和download="animation.webm"属性 - 调用
a.click()自动触发下载
补充说明
若需MP4等格式，MediaRecorder原生不支持H.264编码导出（多数浏览器禁用），此时应引入FFmpeg.wasm对WebM转码，或服务端完成格式转换。另外，录制期间避免Canvas尺寸动态变化，否则可能导致流中断或黑帧。
