使用画布绘制一个流动管道_使用画布对果冻形状进行绘制和动画处理，第2部分...

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

In the last tutorial we saw how to draw and animate jelly shapes. This tutorial will be a continuation, and we will see how to create an original slider full of jelly effects. Here is a gif:

在上一个教程中，我们看到了如何绘制和设置果冻形状的动画。 本教程将是续篇，我们将看到如何创建充满果冻效果的原始滑块。 这是一个gif：

We recommend to read the previous tutorial, for understanding the basics to get jelly shapes directly in the browser.

我们建议您阅读上一教程 ，以了解直接在浏览器中获取果冻形状的基础知识。

As we announced in the last post, while we build the slider, we will learn how to:

正如我们在上一篇文章中宣布的那样，在构建滑块时，我们将学习如何：

• Draw more jelly shapes, and text!
  画更多的果冻形状和文字！
• Use images inside the shapes, not only solid colors.
  在形状内部使用图像，不仅要使用纯色。
• Animate the shapes to show or hide them smoothly.
  对形状进行动画处理以平滑显示或隐藏它们。
• Morph from a jelly shape to another.
  从果冻形状变形为另一个形状。
• Make the entire slider responsive.
  使整个滑块响应。

Let's begin!

让我们开始！

基本HTML和CSS ( Basic HTML and CSS )

The HTML and CSS code for our slider is pretty simple. The markup will be just a container element, and a canvas to draw all the jelly things:

滑块HTML和CSS代码非常简单。 标记将只是一个容器元素，以及一个用来绘制所有果冻的canvas ：

<div class="jelly-container">
    <canvas class="jelly-canvas"></canvas>
</div>

And the CSS (SCSS) will be the following:

CSS（SCSS）将如下所示：

/* General styles */

html, body {
     
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
     
  background-color: #106CD9;
  overflow: hidden;
}

/* Jelly slider */

$width: 1300px;
$height: 600px;

// Setting dimensions
.jelly-container, .jelly-canvas {
     
  width: $width;
  height: $height;
}

// Centering
.jelly-container {
     
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: - $width / 2;
  margin-top: - $height / 2;
}

As you can see, the markup and styles required are very straightforward. All the hard work will be in the JavaScript. But first, we need to draw our paths in a vector editor, let's see how to do it!

如您所见，所需的标记和样式非常简单。 所有的辛苦工作将在JavaScript中进行。 但是首先，我们需要在矢量编辑器中绘制路径，让我们看看如何做到这一点！

绘制SVG路径 ( Drawing SVG paths )

We have used a vector editor to draw the SVG paths we need. We have exported the final result to a SVG file, getting something like this:

我们使用了矢量编辑器来绘制所需的SVG路径。 我们已经将最终结果导出到SVG文件中，得到的内容如下：