有一个很酷的 JavaScript 库，Chris Gannon、Val Head和CodePen等名字都令人赞叹不已。您还可以在Product Hunt上找到它，它的表现相当不错。该库正是Dave DeSandro的Zdog。 Backward Skip 10s Play Video Forward Skip 10s 在这篇文章中，我将向您介绍 Zdog 并向您展示一些由出色的开发人员制作的可爱演示，您可以对其进行逆向工程并从中学习。 让我们深入了解吧！ 什么是 Zdog DeSandro 在图书馆的专用网站上解释了 Zdog 的含义： <canvas>Zdog 是一个用于SVG 的3D JavaScript 引擎。使用 Zdog，您可以在 Web 上设计和渲染简单的 3D 模型。Zdog 是一个伪-3D 引擎。它的几何形状存在于 3D 空间中，但渲染为平面形状。

这使得 Zdog 很特别。 Learn to Code with JavaScript 换句话说，您可以设计、显示 SVG 或<canvas>基于 SVG 的 3D 模型并为其制作动画。 Zdog 很小（整个库有 2,100 行 黎巴嫩电话号码表 代码，缩小为 28KB）并且对开发人员友好（您可以使用其简单的声明式 API 快速实现它）。 Zdog 入门 与大多数 JavaScript 库的情况一样，您可以通过以下方式将 Zdog 包含在您的项目中： 只需从此链接将库的副本下载到您的本地环境中请输入npm 以下是 CodePen 上的官方Hello World演示，可帮助您立即启动并运行该库： DeSandro 提供了一份很棒的入门指南，我将用它来让您了解该库的工作原理以及您可以从中获得哪些结果。 Zdog 的工作原理 Learn to Code with JavaScript 让我们首先创建一个静态 SVG 圆。

HTML 只是一个可以用作包装器的 SVG 元素。如果您更喜欢使用canvas元素创建Zdog图形，只需将svg标签替换为标签 要绘制图形，您需要创建 Zdog 类的实例。 是处理or元素Illustration的顶级类。您为场景创建的形状将是类实例的子级。 <canvas><svg>Illustration Ellipse是一 与大多数 JavaScript 库的情个形状类。您创建 shape 类的新实例Ellipse并将其添加到容器中，circle在本例中，使用 addTo()方法。Zdpt 库的情况一样og 提供了许多预定义的形状，例如rect、polygon等。要创建自定义形状，请使用该类Shape并定义其路径点。您可以向形状添加其他属性，例如diameter、stroke和color。