如果我們用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寬高的矩形在畫布中心旋轉。

接下來，我們將這個效果錄製下來，假設我們錄製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();
}, 6000);

這樣，就可以達到我們想要的錄屏效果了。

完整的程式碼在https://codepen.io/akira-cn/pen/LYNVewy。

轉載自：https://juejin.im/post/6859177958058229768