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

為秀英等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及秀英網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、秀英網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

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

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

錄制視頻

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

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寬高的矩形在畫(huà)布中心旋轉(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事件里，我們通過(guò)Blob對(duì)象，將數(shù)據(jù)寫(xiě)入到頁(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ì)象，可以看這篇文章。

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

recorder.start（）;

setTimeout（（） => {

recorder.stop（）;

}, 6000）;

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