详解如何将 Canvas 绘制过程转为视频
如果我们用Canvas实现了一些动画效果,需要将它回放出来,很多人通常就是用录屏工具将屏幕内容录下来播放,很少有人知道,Canvas可以直接通过现代浏览器支持的 Media Streams API 来转成视频。
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);
这样,就可以达到我们想要的录屏效果了。
完整的代码在https://codepen.io/akira-cn/pen/LYNVewy。
与音频结合
Canvas 录制好的视频,我们还可以将它和音频结合,方法是通过 ffmpeg 的 Web 端来合成。
浏览器可以通过 WebAssembly 来集成 ffmpeg,具体的项目在这里,有兴趣的同学可以研究下。
ffmpeg 的 Web API 用起来还比较复杂,奇舞团的同学开发了一个非常好用的封装,项目地址在这里,可以在这里看到具体的例子。
到此这篇关于详解如何将 Canvas 绘制过程转为视频的文章就介绍到这了,更多相关Canvas 绘制过程转为视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
- canvas版人体时钟的实现示例
- Canvas在超级玛丽游戏中的应用详解
- js canvas实现五子棋小游戏
- Canvas实现放大镜效果完整案例分析(附代码)
- 一个基于canvas的移动端图片编辑器的实现
- Canvas获取视频第一帧缩略图的实现
- canvas绘制图片drawImage使用方法
- canvas 绘图时位置偏离的问题解决
- 如何在Canvas上的图形/图像绑定事件监听的实现
- js+canvas实现刮刮奖功能
- canvas实现滑动验证的实现示例
- canvas画图被放大且模糊的解决方法
- canvas小画板之平滑曲线的实现
- 清除canvas画布内容(点擦除+线擦除)
- Html5 canvas画图白板踩坑
- 原生canvas制作画图小工具的踩坑和爬坑
- html5 canvas 实现光线沿不规则路径运动
- canvas绘制太极图的实现示例
- vue下canvas裁剪图片实例讲解