HTML5 Canvas:如何伪造globalCompositeOperation ="darker"

jti*_*kle 5 javascript html5-canvas

我用Google搜索并搜索了这一点,我所能找到的,包括在StackOverflow上,"支持已经在大多数主流浏览器中被破坏了." 不是我的问题的实际解决方案.

这个月的花花公子带着一副3D眼镜(红色/青色)来观看令人eye目的中心折叠.当然,我点击了互联网,找到了我能看到的每一个红色/青色的立体影像,看看它们有多棒.最终我发现了一些动画GIF,这导致了我可能会制作一些很酷的HTML5 Canvas,让你在3D场景中放置形状.

这是我得到了多远. 仅适用于Google Chrome.在Firefox中,"高架文本"应该看起来正确,但不是矩形.

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

理论上,重叠部分应减去变成纯黑色.在Chrome中,这适用于填充矩形,抚摸文本,但不适用于填充文本.在Firefox中,这只适用于抚摸文本.

虽然预期的效果globalCompositeOperation="darker"应该完全符合我的要求,但显而易见的是,沿着这条道路前进只会带来痛苦.

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

我可以在Javascript中自己进行像素换像,但这看起来有点矫枉过正.有什么想法吗?

Phr*_*ogz 3

如果您仍然需要这个,我编写了一个免费的上下文混合器库,可让您在两个画布之间执行 Photoshop 风格的混合模式。我还没有添加 'darker',但你可以:

  1. 在 GitHub 上分叉该项目,添加您自己对 darker 的支持(很容易了解如何添加模式),然后向我发送拉取请求,或者
  2. 不断地向我保证投票,以便为您添加它。:) 唯一困难的部分(与许多混合模式一样)将尝试确定在混合一两个不透明度 <100% 的区域时正确的做法。