h5画布动画_如何使用CCapture保存画布动画

h5画布动画

by Ibby EL-Serafy

由Ibby EL-Serafy

如何使用CCapture保存画布动画 (How to save canvas animations with CCapture)

You’ve been learning p5.js and you’ve created a wonderful animation and now you want to share it with the world. How do you go about that?

您一直在学习p5.js，并且已经创建了一个很棒的动画，现在想与世界分享。 您如何处理？

We could use screen capture software, but this only works if the animation is running at the right speed. With the above animation, I was getting less than half a frame per second. The ccapture.js library is mentioned in the p5.js documentation and has worked well for me.

我们可以使用屏幕捕获软件，但这仅在动画以正确的速度运行时才有效。 通过上面的动画，我每秒不到半帧。 p5.j​​s文档中提到了ccapture.js库，对我来说效果很好。

If you’d like to follow along with this tutorial you can fork the sandbox below, which has all the code you’ll need to start.

如果您想按照本教程进行操作，可以在下面的沙箱中创建分支，其中包含您需要启动的所有代码。

View my codesandbox here.

在这里查看我的密码和邮箱。

The first thing we’ll need to do is download the minified CCapture javascript file. We’ll move the file into our project folder, or upload it to our sandbox folder. Then we need to add it to our index.html file:

我们需要做的第一件事是下载缩小的CCapture javascript文件 。 我们将文件移动到我们的项目文件夹中，或将其上传到我们的沙盒文件夹中。 然后，我们需要将其添加到我们的index.html文件中：

<script src="p5.min.js"></script>&