如何将Canvas绘制过程转为视频

录制视频

首先我们写一个非常简单的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()

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

接下来，我们将这个效果录制下来，假设我们录制6秒的视频，首先我们要获取MediaStream对象：

const stream = canvas.captureStream()

然后，我们创建一个MediaRecorder：

const recorder = new MediaRecorder(stream, {mimeType: 'video/webm'})

接着我们可以注册ondataavailable事件，将数据记录下来：

const data = []

recorder.ondataavailable = function (event) {
  if (event.data && event.data.size) {
    data.push(event.data)
  }
}

在onstop事件里，我们通过Blob对象，将数据写入到页面上的video标签中。

recorder.onstop = () => {
  const url = URL.createObjectURL(new Blob(data, {type: 'video/webm'}))
  document.querySelector('#videoContainer').style.display = 'block'
  document.querySelector('video').src = url
}

最后，我们开始录制视频，并设定在6秒钟之后停止录制：

recorder.start()

setTimeout(() => {
  recorder.stop()
}, 6 * 1000)

这样，就可以达到我们想要的录屏效果了。

与音频结合

Canvas录制好的视频，我们还可以将它和音频结合，方法是通过ffmpeg的Web端来合成。

浏览器可以通过WebAssembly来集成ffmpeg，具体的项目在这里，有兴趣的同学可以研究下。ffmpeg的Web API用起来还比较复杂，一个非常好用的封装，项目地址open in new window，可以在这里看到具体的例子。

总结

在一些需要动态回放需求的场景里，我们可以用Canvas来实时创建视频然后回放，从而不必使用JS重新绘制，这是一种比较节省资源的方式。另外，Canvas的录制功能对于一些在线教学的场景也很有价值，录屏软件消耗资源较多，而在Web上直接录制Canvas，这可能是一种更简单便捷的方式。

# 如何将Canvas绘制过程转为视频

# 录制视频

# 与音频结合

# 总结

如何将Canvas绘制过程转为视频

录制视频

与音频结合

总结