还在手动生成图像？太low了！来试试CSS Painting API 自动生成图像的快感！

图像为应用程序增添色彩，丰富内容。然而，如果网页中嵌入了大量高分辨率图像，会大量增加页面资源加载时间，严重影响用户体验。对于展示产品、方案等必须内容的图像，我们别无选择，只能按照正常方式嵌入这些图像并通过缓存它们来优化应用程序。但是，如果我们在应用程序中需要几何图像，则不必再将其作为资源来加载。

我们可以使用 CSS Painting API 即时生成几何图像。

让我们一起来走进这个 API，并且学习如何使用它生成图像吧～

CSS Painting API 的简介

开发者们能够使用 CSS Painting API 使用编写的 JavaScript 函数将图像绘制到 CSS 属性中，例如 background-image和 border。它提供了一组 API，使开发人员可以访问 CSSOM，CSS Houdini（Houdini）的一部分 —— 新浏览器 API 的集合，为开发人员提供了对 CSS 本身的更底层的访问方法。）

嵌入图像的传统方法如下。

div {
    background-image: url('assets/background.jpg');
}
复制代码

 

如果使用 CSS Painting API，我们只需要调用 paint() 函数，并且传入一个 JavaScript 声明好的 Worklet：

div {
    background-image: paint(background);
}
复制代码

这串代码的工作逻辑是这样的：

在上文中似乎存在着一些晦涩难懂的术语。例如，我们提及了 worklet࿱