混合模式是否可以应用于css / javascript / canvas中的文本？

Question

我更喜欢CSS纯粹回归到Javascript。如果根本不可能，我如何使用Canvas标签应用此效果？

具有预期的效果：它是一堆difference混合模式。

如果是这样，是否可以在Mozilla上工作？

Answer 1

只考虑可能性......

就浏览器支持而言，纯CSS解决方案会很不稳定。

过滤效果

某些浏览器支持CSS图像滤镜效果。

您可以使用反转滤镜来翻转黑/白。

非矩形形状

某些浏览器支持CSS整形和/或CSS剪辑路径。

您可以使用它们来定义应用反转滤波器的非矩形区域。

<强>替代地

1. 2种模式可以有2张图像：黑白色和白底黑色。

2. 您可以使用Canvas组合剪切路径，getImageData和合成来反转颜色。

3. 您可以使用SVG绘制文本。您可以使用剪裁来隔离您的黑白与w / b区域并使用feColorMatrix反转颜色

示例SVG feColorMatrix：

<filter id="matrix-invert">
    <feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/>
 </filter>