怎么将Canvas绘制过程转为视频

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

为秀英等地区用户提供了全套网页设计制作服务，及秀英网站建设行业解决方案。主营业务为网站设计制作、成都网站设计、秀英网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

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;

};

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

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

recorder.start（）;

setTimeout（（） => {

recorder.stop（）;

}, 6000）;

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

网站名称：怎么将Canvas绘制过程转为视频
当前地址：http://kswsj.com/article/poeghj.html