我已经谷歌搜索并搜索了这一点，我所能找到的，包括在StackOverflow上，“支持已经并且在大多数主流浏览器中被破坏了”。不是我问题的实际解决方案。
这个月的花花公子带着一副3D眼镜（红色/青色）来观看令人eye目的中心折叠。当然，我点击了互联网，找到了我能看到的每一个红色/青色的立体影像，看看它们有多棒。最终我发现了一些动画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中自己进行像素换像，但这看起来有点矫枉过正。有什么想法吗？
答案 0 :(得分：3)
如果你仍然需要这个，我写了一个free context-blender library，可以让你在两幅画布之间进行Photoshop风格的混合模式。 我还没有添加'darker'，但你可以：
答案 1 :(得分：0)
似乎Firefox中的正确模式是globalCompositeOperation =“difference”。尚未在Chrome或IE中测试过。
因为“差异”是一种数学运算，所以实施中没有歧义，不像主观术语“较暗”。
答案 2 :(得分：0)
也许您想使用darken代替darker。 darker已removed from the specification in 2007
答案 3 :(得分：0)
这有点古怪，但是对我有用。 您可以这样做来反转整个画布
ctx.globalCompositeOperation = "difference";
ctx.fillStyle = "white";
ctx.fillRect(0,0,canvas.width,canvas.height);
然后使用globalCompositeOperation = "lighter"渲染任何要渲染的内容。然后再次反转整个画布，它应具有与“较暗”混合模式相同的结果。