使用CSS油漆API創建生成模式

該教程演示了使用CSS塗料API創建三種生成模式。它的目的是對HTML，CSS和JavaScript感到滿意的開發人員，對生成藝術和油漆API進行了輕柔的介紹。

長期以來，網絡一直是藝術表達的畫布，但是CSS缺乏專用的繪圖API，直到Houdini Project的油漆API為止。該教程利用此API創建視覺上吸引人的動態模式。

生成藝術和CSS油漆API：

教程首先解釋了使用算法和隨機性創建的生成藝術和CSS Paint API，該API可通過JavaScript“ Paint Worklets”提供低級訪問CSS的訪問。這些功能包含paint()函數的工作點允許使用類似帆布的語法創建動態圖像。油漆API提供了速度和響應能力，與現有的CSS系統良好集成，但是瀏覽器支持目前受到限制（主要是Chrome和Edge）。

模式：

探索了三種不同的模式：

• “微小斑點”：一種隨機大小的旋轉橢圓形的模式，可通過CSS自定義屬性（種子，顏色，計數，最小/最大尺寸）自定義。教程詳細信息創建工作點類別，使用屬性和值API定義輸入屬性，並實現paint()函數以使用pseudo-random編號生成生成一致的渲染來生成斑點。

• “包豪斯”：一個基於網格的模式，具有隨機選擇的形狀（圓，弧，矩形，三角形）和每個單元內的旋轉。教程引入了scaleCtx函數，以處理縮放固定大小的圖案以適合容器，以及用於繪製形狀的輔助功能。

• “ Voronoi Arcs”：利用Voronoi Tessellation創建有機形狀的模式。該教程引入了一個輔助函數（ createVoronoiTessellation ）來生成Tessellation，並且paint()函數在每個Voronoi單元中呈現弧，並帶有可選的內圓。

設置和代碼結構：

該教程使用Codepen來易於開發。它說明了設置工作場類，並使用registerPaint和CSS.paintWorklet.addModule()進行註冊，並通過background-image: paint(workletName); 。強調使用seedrandom確定性隨機性的重要性，以避免在調整大小上閃爍。該教程為每個模式提供詳細的代碼段，並解釋邏輯和功能。

隨機化和進一步的探索：

教程結束時，通過顯示如何通過動態設置--pattern-seed屬性來隨機將頁面加載模式隨機化。它鼓勵讀者實驗並擴展提供的模式，提出進一步的定制和探索生成藝術技術。最終的挑戰鼓勵讀者在頁面本身上找到隱藏的生成工作點。

以上是使用CSS油漆API創建生成模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！