如果我们用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,绘制过程,转为视频
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？