如何使用CSS Paint API创建随机生成的背景

2020年12月30日11:19:17 发表评论 30 次浏览

本文概述

CSS Paint API(又名CSS Custom Paint)使开发人员能够编写JavaScript函数以将图像绘制到CSS属性中, 例如背景图片, 边框图像等等。在本文中, 我们将讨论CSS Paint API的基础知识, 尤其是如何创建随机生成的背景。

什么是CSS Paint API

CSS Paint API是CSS Houdini, 这是一组低级API, 使开发人员可以直接访问CSS对象模型(CSSOM)。使用Houdini, 即使未在浏览器中实现, 开发人员也可以创建自己的CSS功能。

通常, 我们会向这样的元素添加背景图片:

body {
  background-image: url('path/to/image.jpg');
}

该图像是静态的。如果你从技术上考虑, 当浏览器解析此CSS代码时, 它将向URL发送HTTP请求并获取图像。然后, 它将图像显示为身体的背景图像。

与静态图像不同, 你可以使用CSS Paint API创建动态背景。继续阅读以了解操作方法。

CSS Paint API入门

要开始使用CSS Paint API, 请从以下步骤开始。

  1. 添加CSS涂料()函数
  2. 编写外部绘画工作文件
  3. 在主线程中调用工作集

在创建动态背景之前, 我们先从一个由气泡组成的简单静态背景开始。

气泡组成的静态背景

首先, 我们需要建立样式元素。我们将使用一个简单的<div>元件。

<!-- index.html -->
<div id="bubble-background"></div>

步骤1:添加CSS涂料()函数

要使用CSS Paint API作为背景, 请添加涂料()功能背景图片元素的属性。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

如何使用CSS Paint API创建随机生成的背景1
div#bubble-background {
  width:400px;
  height:200px;
  background-image: paint(bubblePaint);
}

bubblePaint是我们将在后续步骤中创建的工作表。

步骤2:编写外部绘制工作文件

我们需要将工作表保存在外部JavaScript文件中-我们将其称为bubble-paint.js.

// bubble-paint.js
registerPaint('bubblePaint', class {
  paint(ctx, geom) {
    const circleSize = 10; 
    const bodyWidth = geom.width;
    const bodyHeight = geom.height;

    const maxX = Math.floor(bodyWidth / circleSize);
    const maxY = Math.floor(bodyHeight / circleSize); 

    for (let y = 0; y < maxY; y++) {
      for (let x = 0; x < maxX; x++) {
        ctx.fillStyle = '#eee';
        ctx.beginPath();
        ctx.arc(x * circleSize * 2 + circleSize, y * circleSize * 2 + circleSize, circleSize, 0, 2 * Math.PI, true);
        ctx.closePath();
        ctx.fill();
      }
    }
  }
});

在此文件中, registerPaint()函数注册绘画工作区。第一个参数是工作项的名称(与我们在油漆(bubblePaint))。下一个参数应该是带有涂料()方法。

的涂料()方法是我们编写JavaScript代码以渲染图像的地方。在这里, 我们使用了两个参数:

ctx

类似于

CanvasRenderingContext2D

(的返回值

canvas.getContext(" 2d")

), 尽管不完全相同。根据

谷歌

:

Paint Worklet的上下文与<canvas>上下文不是100%相同。到目前为止, 缺少文本呈现方法, 并且出于安全原因, 你无法从画布中读取像素。

几何

包含两个元素:

宽度

高度

绘画元素的

在函数内部, 有一些逻辑可以创建模式。的ctx。函数是我们用来创建画布的工具。如果你不熟悉画布, 建议你仔细阅读一下画布API教程.

步骤3:在主线程中调用工作集

下一步是在主JavaScript线程(通常在HTML文件中)中调用工作集。

看笔

j

由Supun Kavinda(

@SupunKavinda

)

on

密码笔

.

CSS Paint API的动态背景

让我们动态调整以上气泡的颜色和大小。这很简单CSS变量.

步骤1:添加CSS变量

div#bubble-background {
  --bubble-size: 40;
  --bubble-color: #eee;

  // other styles
}

步骤2:使用CSS变数

要在这些CSS变量中使用涂料()方法, 我们首先必须告诉浏览器我们将要使用它。这是通过添加inputProperties()类的静态属性。

// bubble-paint.js
registerPaint('bubblePaint', class {
  static get inputProperties() { return ['--bubble-size', '--bubble-color']; }

  paint() { /* */ }
});

我们可以从的第三个参数访问这些属性涂料()功能。

paint(ctx, geom, properties) {
    const circleSize = parseInt(properties.get('--bubble-size').toString());
    const circleColor = properties.get('--bubble-color').toString(); 

    const bodyWidth = geom.width;
    const bodyHeight = geom.height;

    const maxX = Math.floor(bodyWidth / circleSize);
    const maxY = Math.floor(bodyHeight / circleSize); 

    for (let y = 0; y < maxY; y++) {
      for (let x = 0; x < maxX; x++) {
        ctx.fillStyle = circleColor;
        ctx.beginPath();
        ctx.arc(x * circleSize * 2 + circleSize, y * circleSize * 2 + circleSize, circleSize, 0, 2 * Math.PI, true);
        ctx.closePath();
        ctx.fill();
      }
    }
}
使用CSS变量制作的动态背景

使用CSS Paint API创建动态背景非常容易。

这个例子密码笔台式机和移动设备有两种不同的背景。

诀窍是更改内部的变量值媒体查询.

@media screen and (max-width:600px) {
  div#bubble-background {
    --bubble-size: 20;
    --bubble-color: green; 
  }
}

那不是很酷吗?想象一下, 拥有静态图像-你需要在服务器上托管两个不同的图像才能创建这些背景。使用CSS Paint API, 我们可以创建无数精美的图形。

创建随机生成的背景

现在你可以轻松使用CSS Paint API, 让我们探讨如何使用CSS Paint API创建随机生成的背景。

的Math.random()功能是制作随机生成背景的关键。

Math.random()
// returns a float number inclusive of 0 and exclusive of 1

在这里, 我们正在执行与之前大致相同的过程;唯一的区别是我们正在使用数学随机在功能涂料()方法。

让我们创建一个具有随机渐变的背景。

body {
  width:100%;
  height:100%;
  background-image: paint(randomBackground);
}


registerPaint('randomBackground', class {
  paint(ctx, geom) {
    const color1 = getRandomHexColor();
    const color2 = getRandomHexColor();

    const gradient = ctx.createLinearGradient(0, 0, geom.width, 0);
    gradient.addColorStop(0, color1);
    gradient.addColorStop(1, color2);

    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, geom.width, geom.height);
  }
})

function getRandomHexColor() {
  return '#'+ Math.floor(Math.random() * 16777215).toString(16)
}

的getRandomHexColor函数执行数学运算以创建随机的十六进制颜色。看到这个有用的教程有关其工作原理的更多详细信息。

这是我们随机背景的最终结果。重新加载页面后, 你会看到随机的渐变, 你可以使用它们来制作独特而有趣的网页。

看笔

MWwEXaX

由Supun Kavinda(

@SupunKavinda

)

on

密码笔

.

你还会注意到, 调整浏览器窗口的大小时颜色会发生变化。那是因为浏览器通过调用涂料()方法不同几何调整大小时的值。

虽然数学随机只是生成一个简单的随机数, 这是创建任何随机背景时最重要的功能。你可以使用此方法构建的出色功能的范围仅受你的想象力限制。

浏览器兼容性

与CSS Paint API一样令人惊奇的是, 浏览器兼容性可能是一个问题。仅最新的浏览器版本支持它。这是来自的浏览器兼容性数据胡迪尼准备好了吗?在撰写本文时。

Houdini的浏览器兼容性

从这些数据来看, 在生产中使用Houdini并不是一个好主意。但是, 谷歌浏览器实验室团队创建了一个保鲜膜使CSS Paint API在大多数浏览器中都能正常工作。尽管如此, 在生产中使用动态背景之前, 请务必在所有主要浏览器上对其进行测试。

以下是检测JavaScript对浏览器支持的方法:

if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('bubble-paint.js');
}

在CSS中:

@supports (background: paint(id)) {
  div#bubble-background {
    width:400px;
    height:200px;
    background-image: paint(bubblePaint);
  }
}
>

倒退

CSS后备属性有助于改善浏览器支持。

aside {
  background-image: url('/path/to/static/image');
  background-image: paint(bubblePaint);
}

不支持涂料()函数无法识别该语法。因此, 它将忽略第二个, 并加载URL。支持它的浏览器将理解两种语法, 但是第二种将覆盖第一种。

CSS Paint API的其他有趣用例

以下是使用CSS Paint API的其他有用且令人兴奋的方法。

图片占位符

使用CSS Paint API, 我们可以绘制一个占位符以在加载图像时显示。这需要Houdini的新CSS属性和CSS Paint API。

请注意, 只有少数浏览器支持<图像>CSS属性的语法, 因此它可能无法在你的浏览器中使用。

看笔

RwPKYBQ

由Supun Kavinda(

@SupunKavinda

)

on

密码笔

.

画笔描边背景

我见过无数使用笔触来强调其营销关键字的商业网站。虽然可以使用画布创建笔触, 但是使用CSS Paint API则要容易得多。

看笔

大众汽车

由Supun Kavinda(

@SupunKavinda

)

on

密码笔

.

由于只有CSS, 因此你可以更改变量并根据需要重新使用笔触。

.another-brushstroke {
  --brush-color: #fff;
  background-image: paint(brushstroke);
}

总结

在本指南中, 我们介绍了CSS Paint API的基础知识, 并通过一些示例探讨了如何使用它。现在, 你应该具有使用此新API创建更多创意和动态图像所需的背景。虽然我们专注于背景图片, 你可以使用涂料()也可以在其他属性中起作用(例如, 边框图像)。 CSS Paint API和其他CSS Houdini功能代表了CSS的未来, 因此现在是开始的时候了。

掌握了基础知识之后, 请进一步了解胡迪尼并查看此可调整和可下载的库CSS Paint工作集.

你的前端占用了用户的CPU吗?

随着Web前端变得越来越复杂, 资源贪婪功能对浏览器的需求也越来越大。如果你有兴趣监视和跟踪生产中所有用户的客户端CPU使用率, 内存使用率等,

尝试notlogy

.

LogRocket仪表板免费试用横幅

https://notlogy.com/signup/

日志火箭就像Web应用程序的DVR, 它记录了Web应用程序或网站中发生的一切。你不必猜测为什么会发生问题, 而是可以汇总并报告关键的前端性能指标, 重播用户会话以及应用程序状态, 记录网络请求, 并自动发现所有错误。

现代化调试Web应用程序的方式—免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: