怎么將Canvas繪制過程轉(zhuǎn)為視頻

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

　　Canvas對象支持captureStream方法，這個方法會返回一個MediaStream對象。然后，我們可以通過這個對象創(chuàng)建一個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）;

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

　　接下來，我們將這個效果錄制下來，假設我們錄制6秒的視頻，首先我們要獲取MediaStream對象：

　　const stream = canvas.captureStream（）;

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

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

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

　　const data = [];

　　recorder.ondataavailable = function （event） {

　　if （event.data && event.data.size） {

　　data.push（event.data）;

　　}

　　};

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

　　recorder.onstop = （） => {

　　const url = URL.createObjectURL（new Blob（data, { type: 'video/webm' }））;

　　document.querySelector（"#videoContainer"）。style.display = "block";

　　document.querySelector（"video"）。src = url;

　　};

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

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

　　recorder.start（）;

　　setTimeout（（） => {

　　recorder.stop（）;

　　}, 6000）;

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