Javascript 在客户端（jquery）上绘制一些线条并生成动画电影

到目前为止，我一直在网上搜索这张照片，但运气不好。是否可以从网页上的自定义图形制作电影

例如，使用jquery插件在画布上绘制，完成绘制后，用户可以单击“制作电影”按钮，并从图形中生成动画电影

这可能吗

---

如果客户端不可能，或者服务器端有任何选项：例如，我会在服务器上请求一个API，我会将绘制的所有向量的信息（按时间顺序）发送到我的服务器，服务器生成电影并发送回链接？

这取决于你所说的“电影”是什么意思

选项#1

您可以使用

canvas.toDataURL

将每个自定义图形转换为图像

然后使用

window.requestAnimationFrame

创建一个循环，并使用一系列

context.clearRect

+

context.drawImage（theNextImage，0,0）

循环您的图像

选项2

如果您想要动画的可导出版本，可以使用一个客户端工具将一系列画布显示转换为动画.gif。这里有一个例子：

选项#3

---

如果要将html画布图形集编码为视频格式（例如，.MP4），则需要额外的复杂软件客户端。

一切皆有可能，但问题在于它是否真实或方便

选项

您可以在客户端进行所有视频编码。以前有过，但结果和性能是不同的（有关此方法的更多详细信息，请参阅我以前的答案）

另一个选项是将帧编码为GIF动画，但要注意一些限制，如调色板减少（GIF中的最大颜色数为256），实际上，由于格式本身无法流式传输，并且无法控制传输（播放、暂停、停止），因此需要限制帧数使用JavaScript

更好的方法

要对视频进行编码，更好的方法是将帧发送到服务器，在那里您可以使用例如来处理它们。这是一款开源软件，您可以在批处理脚本中使用它，也可以在作业中调用它。FFMpeg是真实的，被许多大型网站和专业人士使用

---

HTML5中（目前）似乎没有任何包含任何视频编码API的计划。

只是为了更新：我们决定在服务器上编码，这将REST API公开给客户端。服务器将为此使用FFMpeg。在客户端，情况发生了变化：问题是，我现在需要一种方法在画布上移动一些可拖动的元素（jqueryui），然后单击“收集信息”发送到服务器：元素位置和鼠标光标的移动。