Css 将HTML文本与画布混合

我目前正在一些HTML元素下面呈现画布（目前是

h1

和

span

）。画布包含一个基于两种主要颜色的图像的万花筒：一种非常暗（几乎是黑色），另一种非常亮，可以通过移动鼠标来移动。HTML元素以

color:white

样式呈现

我遇到的问题是当万花筒渲染出一个巨大的白色部分时。文本变得不可见。是否可以使文本显示画布正下方部分的负颜色？比如说，如果画布上文本下的部分是白色的，那么文本会是黑色的吗？以下是问题的屏幕截图：

当然，您可以使用“差异”混合模式使文本更改颜色：

ctx.globalCompositeOperation = "difference";
ctx.fillText(myText, x, y);

例子

var ctx=c.getContext（“2d”）；
var-toggle=false；
对于（变量x=0，步长=c.width/16；x>1，c.高度>>1）
您可以将颜色设置为白色并使用css混合模式：

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

你在画布上合成文本吗？你可能会发现这很有帮助：。谢谢，这就成功了！我所要做的就是简单地把h1放在一个绝对位置，因为画布已经是。