使用画布绘制一个流动管道_使用画布绘制和动画化果冻形状

使用画布绘制一个流动管道

In recent times, we have seen that the web is no longer a page in a browser full of squares. Every day there are more designs which incorporate irregular shapes.

最近，我们已经看到网络不再是充满正方形的浏览器中的页面。 每天都有越来越多的包含不规则形状的设计。

In this tutorial we want to teach you how to create and animate shapes with a jelly effect. At the end, you will be able to create the jelly shape you want, and animate it according to your needs without too much effort.

在本教程中，我们要教您如何创建具有果冻效果的形状和动画效果。 最后，您将能够创建所需的果冻形状，并根据需要对其进行动画处理，而无需付出过多的努力。

Specifically, in this first part we will see how to achieve the following result:

具体来说，在第一部分中，我们将看到如何获得以下结果：

介绍 ( Introduction )

The maths behind an effect like this can be very difficult to achieve. That's why we have tried to group the code needed to create and animate jelly shapes in a library that is easy to use for developers.

这样的效果背后的数学很难实现。 这就是为什么我们试图将创建和动画果冻形状所需的代码分组到易于开发人员使用的库中。

At the same time, we have been inspired by this pen by Thom Chiovoloni, inspired as well in the game The Floor is Jelly. And we have started specifically from this implementation of the jelly physics.

同时，我们的灵感来自Thom Chiovoloni的这支钢笔 ，也受到《地板是果冻 》游戏的启发。 而且，我们从果冻物理学的这种实现方式特别开始。

So, we've packaged this implementation into a library we've just called jelly.js, to which we've added everything we need to get jelly shapes easily. Then let's see how to use it!

因此，我们已将该实现打包到一个名为jelly.js的库中，并在其中添加了轻松获得果冻形状所需的所有内容。 然后，让我们看看如何使用它！

使用SVG路径创建形状 ( Creating the shapes with SVG paths )

We have chosen SVG paths to create the shapes, because we believe it is the easiest and most customizable way we have to do it. In this way, we can create the shapes that we want in a vector editor (like Inkscape or Illustrator), and insert them directly into our HTML document, or even import them from JavaScript.

我们选择了SVG路径来创建形状，因为我们认为这是我们最简单，最可定制的方法。 通过这种方式，我们可以在矢量编辑器（如Inkscape或Illustrator）中创建所需的形状，并将其直接插入HTML文档中，甚至从JavaScript导入它们。

For example, we can draw a simple shape like this:

例如，我们可以绘制一个简单的形状，如下所示：

Then we can include the relevant SVG code directly in the HTML:

然后，我们可以在HTML中直接包含相关的SVG代码：

<!-- SVG with a pentagon path -->
<!-- Note the `display: none` style, because we don't want to show the SVG, but just get the path from JavaScript -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400" style="display: none">
    <path id="pentagon-path" d=