如何將Canvas繪制過程轉(zhuǎn)為視頻

本篇內(nèi)容主要講解“如何將Canvas繪制過程轉(zhuǎn)為視頻”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何將Canvas繪制過程轉(zhuǎn)為視頻”吧!

如果我們用Canvas實(shí)現(xiàn)了一些動(dòng)畫效果，需要將它回放出來(lái)，很多人通常就是用錄屏工具將屏幕內(nèi)容錄下來(lái)播放，很少有人知道，Canvas可以直接通過現(xiàn)代瀏覽器支持的 Media Streams API 來(lái)轉(zhuǎn)成視頻。

Canvas對(duì)象支持captureStream方法，這個(gè)方法會(huì)返回一個(gè)MediaStream對(duì)象。然后，我們可以通過這個(gè)對(duì)象創(chuàng)建一個(gè)MediaRecorder來(lái)錄屏。

我們看一個(gè)簡(jiǎn)單的例子。

錄制視頻

首先我們寫一個(gè)非常簡(jiǎn)單的Canvas動(dòng)畫效果，代碼如下：

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);

這個(gè)效果實(shí)現(xiàn)一個(gè)200寬高的矩形在畫布中心旋轉(zhuǎn)。

接下來(lái)，我們將這個(gè)效果錄制下來(lái)，假設(shè)我們錄制6秒的視頻，首先我們要獲取MediaStream對(duì)象：

const stream = canvas.captureStream();

然后，我們創(chuàng)建一個(gè)MediaRecorder：

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

接著我們可以注冊(cè)ondataavailable事件，將數(shù)據(jù)記錄下來(lái)：

const data = [];
recorder.ondataavailable = function (event) {
  if (event.data && event.data.size) {
    data.push(event.data);
  }
};

在onstop事件里，我們通過Blob對(duì)象，將數(shù)據(jù)寫入到頁(yè)面上的video標(biāo)簽中。

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

如果你不了解 Blob 對(duì)象，可以看這篇文章。

最后，我們開始錄制視頻，并設(shè)定在6秒鐘之后停止錄制：

recorder.start();

setTimeout(() => {
  recorder.stop();
}, 6000);

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

到此，相信大家對(duì)“如何將Canvas繪制過程轉(zhuǎn)為視頻”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！