CSS 函数 - paint()

CSS 中的 paint() 函数用于定义由 PaintWorklet 生成的 <image> 值。PaintWorklet 帮助开发人员定义一些自定义绘画函数，这些函数可以直接在 CSS 中用于各种属性，例如背景、边框等。

语法

paint(workletName, ...parameters)

在以上语法中，函数 paint() 包含以下参数

workletName：指定已注册的工作线程的名称。
parameters：指定传递给 PaintWorklet 的其他参数。它是可选的。

CSS paint() - 创建 Paint Worklet

以下示例演示了 paint() 函数的使用。

您需要创建一个绘画工作线程。要定义一个绘画工作线程，您需要使用 CSS.paintWorklet.addModule('board.js') 加载一个 CSS 绘画工作线程。要注册一个绘画工作线程类，您需要使用 registerPaint 函数。

在以下示例中，创建了一个绘画工作线程并将其用作 <textarea> 的背景图像。使用 <textarea> 是因为它可以调整大小。

注意：与几乎所有新的 API 一样，CSS Paint API 仅在 HTTPS（或 localhost）上可用。

<html>
<head>
   <script>
      if ("paintWorklet" in CSS) {
      CSS.paintWorklet.addModule("board.js");
      }
   </script>

<style>
   textarea {
      background-image: url(board);
      background-image: paint(board);
   }
</style> 
</head>
<body>
   <h2>CSS Function paont()</h2>
   <textarea></textarea>
</body>
</html>

Javascript board.js 如下所示

class TestPainter {
   paint(ctx, geom, properties) {
      // The global object here is a PaintWorkletGlobalScope
      // Methods and properties can be accessed directly
      // as global features or prefixed using self
      // const dpr = self.devicePixelRatio;
      // const dpr = window.devicePixelRatio;
      // const dpr = Window.devicePixelRatio;
      // Use `ctx` as if it was a normal canvas
      const colors = ["yellow", "black", "white"];
      const size = 32;
      for (let y = 0; y < geom.height / size; y++) {
      for (let x = 0; x < geom.width / size; x++) {
         const color = colors[(x + y) % colors.length];
         ctx.beginPath();
         ctx.fillStyle = color;
         ctx.rect(x * size, y * size, size, size);
         ctx.fill();
      }
      }
   }
}

// Register the class under a particular name
registerPaint("board", TestPainter);

打印页面