是否可以将画布动画导出到视频?我想构建一个工具,允许创建简单的动画,但我想将它们导出为.avi .mp4或任何视频格式。
这可能吗?如果是这样,我该怎么办?
您可以尝试使用回调函数将一个侦听器注册到requestAnimationFrame,并在每次循环后尝试捕获canvas png文件,使用html5的某些持久方法将其保存在服务器端或客户端的某个位置,并稍后使用其他软件(如ffmpeg)把它们放在一起形成一个视频文件。
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
用于获取画布图像/ png信息的代码
var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");
您可以使用屏幕捕获软件,其中包含画布所在屏幕的预定义区域。
好的。我知道我已经晚了7年,但是:现在有一个完全符合您需求的图书馆!
Whammy.js对视频进行编码。它工作得很好(但如果你还打算实时查看画布,会减慢你的应用程序)。
如果没有外部库,这很难做到,我不建议使用自己的库。