怎么将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绘制过程转为视频”有了更深的了解，不妨来实际操作一番吧！这里是百云主机网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: Spring中使用自定义ThreadLocal存储导致的坑怎么解决

这篇文章主要介绍了Spring中使用自定义ThreadLocal存储导致的坑怎么解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Spring中使用自定义ThreadLocal存储导致的坑怎么解决文章都会有所收获，下面我们一起来看…

免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。