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
和