将 HTML 文本与画布混合答案

【问题标题】：Blend HTML text with canvas将 HTML 文本与画布混合
【发布时间】：2017-07-20 06:13:30
【问题描述】：

我目前正在一些 HTML 元素（当前为 h1 和 span）下方呈现画布。画布包含一个基于具有两种主要颜色的图像的万花筒：一种非常暗（几乎是黑色），一种非常亮，可以通过移动鼠标来移动。 HTML 元素以color: white 样式呈现。

我遇到的问题是万花筒渲染出巨大的白色部分。文本变得不可见。是否可以使文本在其下方显示画布部分的负色？例如，如果文本下方的画布部分是白色的，那么文本会是黑色的吗？这是问题的截图：

【问题讨论】：

你在画布上合成文本吗？您可能会发现这很有帮助：Inverse text-color on canvas.

标签： css html canvas

【解决方案1】：

您可以将颜色设置为白色并使用 css blending-mode 差异：

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

Demo

【讨论】：

谢谢，成功了！我所要做的就是简单地将 h1 放在一个绝对位置，因为画布已经是。

【解决方案2】：

当然，你可以使用“差异”混合模式来让文字变色：

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

示例

var ctx = c.getContext("2d");
var toggle = false;
for(var x = 0, step = c.width / 16; x < c.width; x += step) {
  toggle = !toggle;
  ctx.fillStyle = toggle ? "#000" : "#fff";
  ctx.fillRect(x, 0, step, c.height);
}

ctx.globalCompositeOperation = "difference";
ctx.font = "32px sans-serif";
ctx.textAlign = "center";
ctx.fillText("ALTERNATING", c.width>>1, c.height>>1);

&lt;canvas id=c&gt;&lt;/canvas&gt;

创意选项：绘制背景稍微透明以使白色变为浅灰色（设置画布元素的 CSS 不透明度），为文本使用阴影或轮廓。

【讨论】：