CSS 函数

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

语法

paint(workletName, ...parameters)

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

  • workletName:指定注册的worklet的名称。

  • 参数:指定要传递给 PaintWorklet 的附加参数。它是可选的。

CSS Paint(): 创建 Paint Worklet

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

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

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

注意:与几乎所有新 API 一样，CSS Paint API 只能通过 HTTPS（或本地主机）使用。

<html>
<head>
   <script>
      if ("paintWorklet" in CSS) {
      CSS.paintWorklet.addModule("/css/js/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();
      }
      }
   }
}

// 以特定名称注册该类
registerPaint("board", TestPainter);