讓我們做生成藝術，我們可以導出到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中文網其他相關文章！