本篇内容主要讲解“如何将Canvas绘制过程转为视频”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何将Canvas绘制过程转为视频”吧!

如果我们用Canvas实现了一些动画效果，需要将它回放出来，很多人通常就是用录屏工具将屏幕内容录下来播放，很少有人知道，Canvas可以直接通过现代浏览器支持的 Media Streams API 来转成视频。

Canvas对象支持captureStream方法，这个方法会返回一个MediaStream对象。然后，我们可以通过这个对象创建一个MediaRecorder来录屏。

我们看一个简单的例子。

录制视频

首先我们写一个非常简单的Canvas动画效果，代码如下：

constcanvas=document.querySelector('canvas');constctx=canvas.getContext('2d');const{width,height}=canvas;ctx.fillStyle='red';functiondraw(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();}functionupdate(t){draw(t/500);requestAnimationFrame(update);}update(0);

这个效果实现一个200宽高的矩形在画布中心旋转。

接下来，我们将这个效果录制下来，假设我们录制6秒的视频，首先我们要获取MediaStream对象：

conststream=canvas.captureStream();

然后，我们创建一个MediaRecorder：

constrecorder=newMediaRecorder(stream,{mimeType:'video/webm'});

接着我们可以注册ondataavailable事件，将数据记录下来：

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

在onstop事件里，我们通过Blob对象，将数据写入到页面上的video标签中。

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

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

最后，我们开始录制视频，并设定在6秒钟之后停止录制：

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

这样，就可以达到我们想要的录屏效果了。

到此，相信大家对“如何将Canvas绘制过程转为视频”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！