Question

是否可以将画布动画导出到视频？我想构建一个工具，允许创建简单的动画，但我想将它们导出为.avi .mp4或任何视频格式。

这可能吗？如果是这样，我该怎么做？

Answer 1

您可以尝试使用回调函数将一个侦听器注册到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");

Answer 2

您可以使用屏幕捕获软件，该软件具有画布所在屏幕的预定义区域。

http://www.webresourcesdepot.com/10-free-screen-recording-softwares-for-creating-attractive-screencasts/

Answer 3

好的。我知道我迟到了7年，但是：现在没有一个图书馆完全可以满足您的需求！

Whammy.js对视频进行编码。效果很好（但是如果您还打算实时查看画布，则会降低应用程序的速度）。

如果没有外部库，这很难做到，我不建议您使用自己的库。

将画布导出为视频

3 个答案: