定义 2 个独立、重叠的画布如何混合

Posted 2023-03-23

【中文标题】定义 2 个独立、重叠的画布如何混合

【英文标题】：Defining how 2 separate, overlapping canvases blend

【发布时间】：2014-06-08 05:58:04

【问题描述】：

我基本上想将一个画布放在另一个画布之上，并定义它们的内容混合方式。

我有一个带有黑色字符的白色画布，我想用一个透明的蓝色矩形突出显示它的一部分，而不会让背景中的黑色字符变成深蓝色。事实上，如果我合并两个画布并将 globalCompositeOperation 设置为“multiply”而不是默认值，同时保持两个画布分开和重叠，我需要我得到的方面。

这就是我所拥有的：

这就是我想要的：

我知道如果我将两个画布合并为一个，globalCompositeOperation 将允许我这样做。但我宁愿保留两个画布：我的背景画布由 lib 显示。我仍然可以画出来，但这会使事情复杂化很多：

我会过于依赖他们的逻辑，必须调整我和他们的逻辑才能使其发挥作用， 性能至关重要，此解决方案意味着以 24 fps 进行更多绘制， 每次更新库时我都会很挣扎...

总而言之，避免干扰 lib 似乎要好得多。有没有办法选择重叠画布的行为方式？

提前致谢！

编辑：我们还考虑将背景画布的白色部分转换为透明部分，并在下面添加我们的高亮画布，但这也很复杂，如果不是不可能的话。

【问题讨论】：

只需将链接发布到您帖子中的图片，我们就会为您修复内联问题。

没关系，我放了 Dropbox 链接，谢谢！

【参考方案1】：

我是否了解 lib 绘制的字母画布具有不透明（白色）背景而不是透明背景？

如果是这样，任何应用突出显示的选项的性能都会相对较差。

标准画布合成无济于事，因为没有组合源-目标像素的混合模式。

剩下的是 .getImageData 来获取字母像素。然后在与白色像素重叠的地方应用蓝色像素，但在与黑色（字母）像素重叠的地方不应用。

但是 .getImageData 不是 GPU 加速的，因此相对较慢。

将蓝色高亮画布放在不透明的字母画布后面将为您提供最佳性能。

底线：如果性能至关重要并且您想要 24+ fps，那么破解该库以使背景透明而不是不透明的白色。 （对不起！）

【讨论】：

这就是我所担心的。但是：“没有结合源-目标像素的混合模式”=> 复合模式没有，但是混合模式可以，对吧？ => blogs.adobe.com/webplatform/2013/01/28/…

对...除了 globalCompositeOperation="lighter" 的一种边缘情况可以混合，但对您的情况没有帮助。话虽如此，如果您愿意不支持 Internet Explorer 或 Blackberry，那么大多数其他浏览器都可以使用真正的混合模式。 IE 在桌面设备上的市场份额仍约为 50%，但在移动设备上仅占 10% 左右。

哦，好吧，这些混合模式不是标准的。这不是问题，IE 还没有关系。但我想无论如何混合都会太重，所以我会尝试调整库！谢谢。