5

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

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

这就是我走多远。 仅适用于谷歌浏览器。在 Firefox 中，“高架文本”看起来应该是正确的，但不是矩形。

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

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

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

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

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

4

4 回答 4

3

If you still need this, I have written a free context-blender library that lets you perform Photoshop-style blend modes between two canvases. I have not yet added 'darker', but you could either:

  1. Fork the project on GitHub, add your own support for darker (it's pretty easy to see how to add a mode) and then send me a pull request, or
  2. Ply me with promises of upvotes to get it added for you. :) The only hard part (as with many of the blending modes) will be attempting to determine what is correct when blending one or two areas which are <100% opacity.
于 2011-02-09T04:53:14.440 回答
0

也许您想使用darken而不是darker. darker已于2007 年从规范中删除

于 2015-04-02T00:52:59.747 回答
0

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

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

于 2014-01-11T23:05:23.967 回答
0

这有点笨拙，但对我有用。您可以通过执行反转整个画布

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

然后渲染任何你想要渲染的东西globalCompositeOperation = "lighter"。然后再次反转整个画布，它应该给出与“较暗”混合模式相同的结果。

于 2019-01-14T22:40:41.197 回答