HTML5画布:如何让globalCompositeOperation=变得“黑暗”
我用谷歌搜索了很多次，我能找到的，包括在StackOverflow上，都是“在大多数主流浏览器中过去和现在都不再支持了”。不是我的问题的实际解决方案。
本月的“花花公子”杂志带着一副3D眼镜(红色/青色)来观看令人眼花缭乱的插页。当然，我在互联网上找到了我能找到的每一个红色/青色浮雕，并看看它们有多棒。最后，我找到了一些动画GIF，这让我产生了一个想法，也许我应该做一些很酷的HTML5 Canvas东西，让你在3D场景中放置形状。
This is how far I got.只有在谷歌浏览器上才能正常工作。在Firefox中，“提升的文本”看起来应该是正确的，而不是矩形。
我生成场景的方法是这样的:有一些层，每个层都包含一个Z索引，你可以在任何你想要的层上放置一个矩形或一些文本。概念很简单。在绘制对象时，它以纯红色向左绘制一个Z索引像素，然后以纯青色向右绘制一个Z索引像素。
理论上，重叠部分应该减去才能变成纯黑色。在Chrome中，这适用于填充矩形、描边文本，但不适用于填充文本。在Firefox中，这只发生在笔划文本上。
尽管globalCompositeOperation="darker"的预期效果应该完全符合我的期望，但很明显，沿着这条路走下去只会带来痛苦。
这里有没有人知道如何在不使用globalCompositeOperation的情况下获得我想要的效果？我试着调整颜色上的alpha通道，但我真的不喜欢它们是如何组合在一起的(它们永远不会加在一起变成纯黑色)。我可以在红色和青色之间绘制第三个黑色矩形，但这不能解决文本或任意形状的问题。
我可以自己在Javascript中逐个像素地渲染，但这似乎有点过分了。有什么想法吗？
回答 3
Stack Overflow用户
发布于 2014-01-12 07:05:24
看起来火狐的正确模式是globalCompositeOperation="difference“。没有在Chrome或IE上测试过。
因为“差”是一个数学运算，所以在实现中不存在歧义，这与主观术语“更暗”不同。
Stack Overflow用户
发布于 2015-04-02 08:53:00
也许你想使用darken而不是darker。darker已被removed from the specification in 2007
Stack Overflow用户
发布于 2019-01-15 06:40:41
这是一个有点老生常谈的方式，但它对我很有效。您可以通过执行以下操作来反转整个画布
ctx.globalCompositeOperation = "difference";
ctx.fillStyle = "white";
ctx.fillRect(0,0,canvas.width,canvas.height);然后使用globalCompositeOperation = "lighter"渲染要渲染的任何内容。然后再次反转整个画布，它应该会产生与“较暗”混合模式相同的结果。
https://stackoverflow.com/questions/2845592
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号