使用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中文网其他相关文章！