问题标签 [css-paint-api]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

13 问题
Newest
Active
Bountied
318
Unanswered
0 投票
0 回答
46 浏览

javascript - CSS Paint API 不适用于链接元素

没发现有人在这里提出过这个问题。

我想知道为什么 CSS Paint API 不适用于a链接元素？

例如。这是div元素的工作示例

https://codepen.io/una/pen/xByaoB

在这个我用a标签替换了它

https://codepen.io/PavelLaptev/pen/jOydKRO

你加不加也没关系display: block。另外，我添加后，一辆漂亮的马车变成了南瓜href。这种效果适用于任何将 Pain API 用于a+href标签的情况。

谢谢

0 投票
1 回答
78 浏览

javascript - PaintWorklet 在锚标记内不起作用

Paint Worklet 在放置在锚标记内时不起作用。

示例站点：https ://codepen.io/lonekorean/pen/aYoJPv

上面的例子，使用

作为

它不工作。仅查看背景颜色，而不是背景图像：paint(polka-dot-fade)。我认为锚标签和 Paint Worklet 在实现的某个地方崩溃。

0 投票
0 回答
55 浏览

javascript - 如何将图像传递给 CSS Paint Worklet？

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

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

规范对此非常清楚：

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

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


12345678910