在上一教程中，我们使用mojs为网页上的不同HTML元素添加动画效果。我们使用该库主要对看起来像正方形或圆形的div元素进行动画处理。但是，您可以使用Html模块来为图像或标题等各种元素设置动画。如果您确实打算使用mojs对基本形状进行动画处理，那么您可能应该使用库中的Shape模块。
Shape模块允许您使用SVG在DOM中创建基本形状。您所要做的就是指定要创建的形状类型，mojs会处理剩下的事情。该模块还允许您为您创建的不同形状设置动画。
在本教程中，我们将介绍Shape模块的基础知识，以及如何使用它来创建不同的形状并为其设置动画。
在Mojs中创建形状
您需要实例化mojsShape对象才能创建不同的形状。该对象将接受不同的参数，这些参数可用于控制您创建的形状的颜色、大小、角度等。
默认情况下，您创建的任何形状都将使用文档正文作为其父级。您可以使用parent属性将任何其他元素指定为其父元素。您还可以借助className属性为您创建的任何形状分配一个类。如果您跳过此属性，库将不会分配任何默认类。
Mojs内置了八种不同的形状，因此您可以通过为shape属性设置值来直接创建它们。您可以将其值设置为circle创建圆形，rect创建矩形，polygon创建多边形。您还可以通过将shape的值设置为lines来绘制直线。如果shape值为cross，则库将绘制两条垂直线；如果shape值为equal。同样，可以通过将属性值设置为zigzag来创建锯齿线。
形状对象还有一个points属性，该属性对于不同的形状具有不同的含义。它确定polygon形状中的总边数和equal形状中的平行线总数。points属性也可用于设置zigzag线的弯曲数量。
正如我之前提到的，mojs使用SVG创建所有这些形状。这意味着Shape对象还将具有一些SVG特定属性来控制这些形状的外观。您可以使用fill属性设置mojs形状的填充颜色。当未指定颜色时，库将使用deepink颜色来填充形状。同样，您可以使用Stroke属性指定形状的描边颜色。当未指定描边颜色时，mojs会保持描边透明。您可以使用fillOpacity和StrokeOpacity属性控制形状的填充和描边不透明度。它们可以是0到1之间的任何值。
Mojs还允许您控制形状的其他与描边相关的属性。例如，您可以使用StrokeDasharray属性指定笔划路径中的破折号和间隙的模式。此属性接受字符串和数字作为有效值。它的默认值为零，这意味着笔划将是实线。可以使用StrokeWidth属性指定笔画的宽度。默认情况下，所有笔画的宽度均为2px。可以使用StrokeLinecap属性指定不同线条端点处的形状。StrokeLinecap的有效值为butt、round和square。
默认情况下，您创建的任何形状都会放置在其父元素的中心。这是因为形状的left和right属性均设置为50%。您可以更改这些属性的值以将元素放置在不同的位置。控制形状位置的另一种方法是借助x和y属性。它们分别确定形状应在水平和垂直方向上移动多少。
您可以使用radius属性指定形状的半径。该值用于确定特定形状的大小。您还可以使用radiusX和radiusY指定形状在特定方向上的大小。控制形状大小的另一种方法是借助scale属性。scale的默认值为1，但您可以将其设置为您喜欢的任何其他数字。您还可以使用scaleX和scaleY属性在特定方向上缩放形状。
默认情况下，形状的所有这些变换的原点都是其中心。例如，如果通过指定angle属性的值来旋转任何形状，则该形状将绕其中心旋转。如果要围绕其他点旋转形状，可以使用origin属性指定它。此属性接受字符串作为其值。将其设置为'0%0%'将围绕其左上角旋转、缩放或平移形状。同样，将其设置为'50%0%'将围绕其顶部边缘的中心旋转、缩放或平移形状。
您可以使用我们刚刚讨论的所有这些属性来创建各种形状。以下是一些示例：
