HTML5 Canvas：如何伪造 globalCompositeOperation="darker"答案

【问题标题】：HTML5 Canvas: How to fake globalCompositeOperation="darker"HTML5 Canvas：如何伪造 globalCompositeOperation="darker"
【发布时间】：2011-02-20 04:42:07
【问题描述】：

我已经用谷歌搜索了这个问题，我能找到的所有信息，包括在 StackOverflow 上，都是“大多数主流浏览器的支持都被破坏了。”不是我的问题的实际解决方案。

本月的《花花公子》带着一副 3D 眼镜（红色/青色）来观看令人瞠目结舌的插页。自然地，我上网寻找我能找到的每一个红色/青色立体浮雕，看看它们有多棒。最终我找到了一些动画 GIF，这让我产生了一个想法，也许我应该制作一些很酷的 HTML5 Canvas 东西，让您可以在 3D 场景中放置形状。

This is how far I got. 仅适用于 Google Chrome。在 Firefox 中，“高架文本”应该是正确的，但不是矩形。

因此，我生成场景的方式是：有层，每个层都包含一个 Z-index，您可以在任何层上放置一个矩形或一些文本。这个概念很简单。绘制对象时，向左绘制一个[Z-index]像素为纯红色，然后向右绘制一个[Z-index]像素为纯青色。

理论上，重叠的部分应该减去成为纯黑色。在 Chrome 中，填充矩形、描边文本会发生这种情况，但填充文本不会。在 Firefox 中，这只发生在描边文本时。

虽然globalCompositeOperation="darker" 的预期效果应该完全符合我的要求，但很明显，走这条路只会带来痛苦。

这里有没有人知道如何在不使用globalCompositeOperation 的情况下获得我想要的效果？我尝试在颜色上弄乱 alpha 通道，但并不真正喜欢它是如何组合在一起的（它们从不加起来是纯黑色）。我可以在红色和青色矩形之间绘制第三个黑色矩形，但这并不能解决文本或任意形状的问题。

我可以自己在 Javascript 中进行逐像素渲染，但这似乎有点矫枉过正。有什么想法吗？

【问题讨论】：

这个问题已经很老了。我想知道现在画布的新混合模式是否可以解决这个问题，也许是乘法模式（？）dev.w3.org/fxtf/compositing-1/#blendingmultiply

标签： javascript html5-canvas

【解决方案1】：

如果您仍然需要这个，我已经写了一个free context-blender library，它可以让您在两个画布之间执行 Photoshop 风格的混合模式。 ~~我还没有添加“深色”~~，但你可以：

在 GitHub 上 fork 项目，添加您自己对 darker 的支持（很容易了解如何添加模式），然后向我发送拉取请求，或者
请向我承诺支持，以便为您添加它。 :) 唯一困难的部分（与许多混合模式一样）将尝试确定在混合一个或两个

【讨论】：

嘿 Phrogz，上下文混合器很棒！我用它来代替过去的黑暗模式。谢谢！

【解决方案2】：

似乎 Firefox 中的正确模式是 globalCompositeOperation="difference"。尚未在 Chrome 或 IE 中测试。

因为“差异”是一种数学运算，所以在实现上没有歧义，不像主观术语“更暗”。

【讨论】：

【解决方案3】：

也许您想使用darken 而不是darker。 darker 一直是removed from the specification in 2007

【讨论】：

【解决方案4】：

这有点老套，但对我有用。您可以通过这样做来反转整个画布

ctx.globalCompositeOperation = "difference";
ctx.fillStyle = "white";
ctx.fillRect(0,0,canvas.width,canvas.height);

然后使用globalCompositeOperation = "lighter" 渲染您想要渲染的任何内容。然后再次反转整个画布，它应该会得到与“较暗”混合模式相同的结果。

【讨论】：