使用使用 CSS Paint API 动态创建与分辨率无关的可变背景效果动态创建与分辨率无关的可变背景效果
来源:https://medium.com/better-programming,作者:Ferenc Almasi
现代Web应用对图像的需求量很大,它们占据网络下载的大部分字节。通过优化它们,你可以更好地利用它们的性能。如果
你碰巧使用几何图形作为背景图像,有一个替代方案:你可以使用 CSS Paint API [1] 以编程方式生成背景。
在本教程中,我们将探讨其功能,并探讨如何使用它来动态创建与分辨率无关的动态背景。这将是本教程的输出:
参考阅读:CSS届的绘图板CSS Paint API简介
设置项目设置项目
首先,创建一个新的 index.html 文件,并编写如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>:art: CSS Paint API</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<textarea class="pattern"></textarea>
<script>
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('pattern.js');
}
</script>
</body>
</html>
有几件事要注意:
在第13行,我们加载了一个新的Paint worklet。目前,全球支持率约为63%。因此,我们必须首先检查是否支持 paintWorklet 。
我正在使用 textarea 进行演示,因此我们可以看到调整画布的大小将如何重绘图案。
最后,你需要创建一个 pattern.js (用于注册绘画工作区)以及一个 styles.css ,我们可以在其中定义几个样式。
什么是什么是worklet??
Paint worklet是一个定义了应该画在画布上的内容的类。它们的工作原理与 canvas 元素类似。如果你以前有这方面的知识,代
码会看起来很熟悉。然而,它们并不是100%相同的。例如,在worklet中还不支持文本渲染方法。
在这里,我们还要定义CSS样式。这是我们要使用worklet的地方:
.pattern {
width: 250px;
height: 250px;