前端一些冷知识：如何将Canvas绘制过程转换为视频。你知道吗？不知道的看这里

最新推荐文章于 2023-11-22 18:37:31 发布

WEB前端含光

最新推荐文章于 2023-11-22 18:37:31 发布

阅读量578

点赞数 1

分类专栏：前端基础前端面试前端项目

本文链接：https://blog.csdn.net/Arui_0/article/details/107944555

版权

本文介绍了如何利用Canvas的captureStream方法和MediaRecorder API将Canvas的动态动画效果转换为视频。通过示例代码展示了从创建MediaStream到生成视频文件的整个过程，强调了这种方法在资源效率和在线教学场景中的优势。此外，还提及了结合音频使用ffmpeg进行视频合成的可能性。

摘要由CSDN通过智能技术生成

文末有福利

如果我们用Canvas实现了一些动画效果，需要将它回放出来，很多人通常就是用录屏工具将屏幕内容录下来播放，很少有人知道，Canvas可以直接通过现代浏览器支持的 Media Streams API 来转成视频。

Canvas对象支持captureStream方法，这个方法会返回一个MediaStream对象。然后，我们可以通过这个对象创建一个MediaRecorder来录屏。

我们看一个简单的例子。

录制视频
首先我们写一个非常简单的Canvas动画效果，代码如下：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const {width, height} = canvas;

ctx.fillStyle = 'red';

function draw(rotation = 0) {
  ctx.clearRect(0, 0, 1000, 1000);
  ctx.save();
  ctx.translate(width / 2, height / 2);
  ctx.rotate(rotation);
  ctx.translate(-width / 2, -height / 2);
  ctx.beginPath();
  ctx.rect(200, 200, 200, 200);
  ctx.fill();
  ctx.restore();
}

function update(t) {
  draw(t / 500);
  requestAnimationFrame(update);
}
update(0);
复制代码

这个效果实现一个200宽高的矩形在画布中心旋转。