使用Two.js绘制2D图形的初学者指南

Two.js一个API，可轻松使用代码创建2D形状。 继续学习，您将学习如何从JavaScript创建形状和设置动画效果。

Two.js与渲染器无关，因此您可以依靠相同的API使用Canvas，SVG或WebGL进行绘制。 该库具有许多方法，可用于控制不同形状在屏幕上的显示方式或动画形式。

安装

库的未压缩版本的大小约为128 KB，而压缩版本为50 KB。 如果使用的是最新版本，则可以使用自定义版本进一步减小库的大小。

您可以从GitHub下载该库的缩小版本 ，也可以直接链接到CDN托管版本 。 将库添加到网页后，就可以开始绘制和设置不同形状或对象的动画。

创建基本形状

首先，您需要告诉Two.js有关要在其上绘制形状和设置其动画的元素。 您可以将一些参数传递给Two构造函数进行设置。

使用type属性设置渲染器的type 。 您可以指定一个值，例如svg ， webgl ， canvas等。默认情况下， type设置为svg 。 可以使用width和height参数指定绘图空间的width和height 。 您还可以使用fullscreen参数将绘图空间设置为fullscreen 。 当fullscreen设置为true时， width和height的值将被忽略。

最后，您可以告诉Two.js在布尔autostart参数的帮助下自动启动动画。

将所有需要的参数传递给构造函数后，您可以开始绘制线条，矩形，圆形和椭圆形。

您可以使用two.makeLine(x1, y1, x2, y2)画一条线。 在此， (x1, y1)是第一端点的坐标， (x2, y2)是第二端点的坐标。 此函数将返回Two.Line对象，该对象可以存储在变量中，以便在以后进行进一步操作。

以类似的方式，您可以分别使用two.makeRectangle(x, y, width, height)和two.makeRoundedRectangle(x, y, width, height, radius)绘制法线和圆角矩形。 请记住， x和y确定矩形的中心，而不是像许多其他库一样确定矩形的左上角坐标。 width和height参数将确定矩形的大小。 radius参数用于指定圆角的半径值。

您还可以分别使用two.makeCircle(x, y, radius)和two.makeEllipse(x, y, width, height)在网页上绘制圆形和椭圆形。 就像矩形一样， x和