0

我正在尝试使用 CSS Paint API 为 h1-tag 创建自定义背景。背景应该被剪辑到文本中，所以基本上我想给它“着色”。

  • 不幸的是，'-webkit-canvas' 已被弃用。要求是实际使用 h1 标签，而不仅仅是在画布中呈现文本并使用合成模式。
  • 我想传入多个图像以使用 ctx.drawImage 进行绘制。

规范对此非常清楚：

CSS.registerProperty({
  name: '--my-image',
  syntax: '<image> | none',
  initialValue: 'none',
  inherits: false,
});

class MyWorklet {
  static get inputProperties() { 
    return ['--my-image']; 
  }

  paint(ctx, geom, properties) {
    const img = properties.get('--my-image');
    console.log(img);
    ctx.drawImage(img,10,10,150,180);    
  }
}
registerPaint('myworklet', MyWorklet);

但是，Chromium 不支持这一点。当前的解决方法似乎是通过background-image: ,属性传递图像。不幸的是，这将与将绘制工作集注册为背景图像 ( background-image: paint(worklet); background-clip: text;) 发生冲突。

将图像传递到绘制工作集的其他方法是什么？不一定要通过css变量。我对硬编码或将图像直接导入到paint worklet 很好。

4

0 回答 0