css - 将 HTML 文本与 Canvas 混合

Question

我目前正在一些 HTML 元素(目前是 h1 和 span)下面渲染 Canvas 。 Canvas 包含一个基于具有两种主要颜色的图像的万花筒:一种非常暗(几乎是黑色)，一种非常明亮，并且可以通过移动鼠标来移动。 HTML 元素以 color: white 样式呈现。

我遇到的问题是当万花筒渲染出巨大的白色部分时。文本变得不可见。是否可以使文本显示其正下方 Canvas 部分的负色？因此，例如，如果文本下方的 Canvas 部分是白色的，那么文本将是黑色的？这是问题的屏幕截图:

Answer 1

您可以将颜色设置为白色并使用 css 混合模式差异:

h1{
  color:white;
  mix-blend-mode: difference;
}

Demo