让我们做生成艺术，我们可以导出到SVG和PNG

本文演示了如何使用JavaScript，SVG和Canvas创建生成艺术工具来生产设计资产，专门满足了会议设计项目的需求。作者受到专业设计师使用的类似工具的启发，概述了创建可自定义，可导出的艺术品的解决方案。

该过程首先在JavaScript中以编程方式定义调色板：

 const colorPalette = [“＃9B2E69”，“＃D93750”，“＃e2724f”，“＃f3dc7b”，“＃4E9397”];

一个功能， makeRects ，然后生成带有随机位置和颜色的重叠矩形：

 // ...（函数定义保持不变）

此函数填充了SVG元素，该元素动态大小到浏览器视口：

 const makevg =（）=> {
  // ...（函数定义保持不变）
};

然后，使用自定义下载功能将生成的SVG作为SVG文件下载：

 // ...（下载功能保持不变）

为了满足客户对PNG格式的需求，该文章利用canvg将SVG渲染到画布上，从而通过FileSaver.js将艺术品下载为PNG：

 // ...（设置功能保持不变）

最终应用程序允许用户以SVG和PNG格式生成和下载艺术品，从而适应不同的视口尺寸和宽高比。作者强调了这种方法的实用性，以快速生产满足特定客户需求的设计资产。在承认可能进一步复杂的潜力（例如，根据视口大小动态调整矩形的数量），该文章强调了这种生成艺术工具的效率和现实世界的适用性。该项目的灵感来自观察专业设计师使用的类似，更高级的工具。

以上是让我们做生成艺术，我们可以导出到SVG和PNG的详细内容。更多信息请关注PHP中文网其他相关文章！