与CSS油漆API结合生成斑点

利用CSS油漆API的力量来召唤生成斑点！本教程探讨了使用Houdini家族的一部分CSS Paint API的定制，随机斑点形状的创建。我们将建立一个生成的斑点工作点，利用JavaScript和CSS自定义属性来控制和响应能力。

生成设计引入了机会元素，定义规则并让随机性指导结果。将其视为使用邮票和骰子来创建独特的模式 - 我们将使用代码使用类似的原理。 CSS Paint API提供了对CSS的低水平访问权限，从而可以通过JavaScript Worklets创建编程图像。 Worklet是一个带有paint()函数的JavaScript类，可为CSS属性生成图像。

我们将构建一个生成的Blob Worklet，接受CSS自定义属性作为控制其外观的输入。这提供了一种表演剂，干净的方法，避免了杂物。该工作点在单独的线程上运行，以防止UI放缓。

这是工作人员功能的预览：

• 作为背景图像： Blob Worklet动态生成背景图像，无缝地调整元素调整大小和自定义属性更改。
• 生成图像面具：工作点充当面具，为设计添加了独特的有机曲线。不断变化的性质使UI保持新鲜。

尽管存在创建斑点的其他方法（例如Blobmaker， border-radius ），但CSS Paint API提供了出色的表现力和性能。它允许通过CSS自定义属性（ --blob-seed ， --blob-num-points ， --blob-variance ， --blob-smoothness ， --blob-fill ）进行精确控制，而不是手动调整。 API的多线程自然可以确保即使具有复杂的生成视觉效果，也可以确保闪耀的性能。

浏览器支持和多填充： CSS Paint API享有越来越多的支持，但并不普遍。我们将使用css-paint-polyfill来确保使用@supports探索优雅的后备机制。

开发设置：一个简单的开发环境（使用npm install和npm run start在克隆的工作点启动式存储库上），以便于易于开发和实时重新加载。此设置处理HTTPS或Local主机服务，以防止CORS问题。

工作点实施：

1. 初始化： Blob类定义并在registerPaint("blob", Blob)中注册。
2. paint()函数：此功能接收2D图形上下文（ ctx ），元素几何（ geometry ）和自定义属性（ properties ）。
3. 输入属性： inputProperties Getter定义了工作场所接受的自定义属性。
4. 属性解析：辅助功能（ propToString ， propToNumber ）分析自定义属性值。
5. 伪数数生成： mulberry32 PRNG确保基于种子值（ --blob-seed ）的一致随机性。这避免了视觉闪烁的重新租赁。
6. 斑点的生成：斑点的形状是通过绘制圆圈周围的点，随机调整其向中心的位置而创建的，并通过它们绘制catmull-rom样条。 lerp功能有助于此调整。 spline函数（来自@georgedoescode/generative-utils ）生成平滑曲线。
7. 随机种子：种子值使用document.querySelector(".worklet-canvas").style.setProperty("--blob-seed", Math.random() * 10000);对于每个页面上的变化斑点形状。
8. Polyfill＆Hallback：使用CSS["paintWorklet"]检查和@supports规则为不支持的浏览器提供@supports规则提供@supports规则，为多文件加载。

该全面的指南使您使用CSS Paint API创建动态和视觉上吸引人的生成斑点。尝试自定义属性，以微调斑点的外观并探索其在UI设计中的不同应用。

以上是与CSS油漆API结合生成斑点的详细内容。更多信息请关注PHP中文网其他相关文章！