如果我們用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://juejin.im/post/6859177958058229768