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

Question

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

我有一个带有黑色字符的白色画布，我希望用透明的蓝色矩形突出显示它的一部分，而背景中的黑色字符则不会变成深蓝色。事实上，如果我将两个画布合并为globalCompositeOperation设置为＆＃34;乘以＆＃34;我需要这个方面。而不是默认，同时保持两个画布分开和重叠。

这里有我所拥有的：

这就是我想要的：

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

• 我过于依赖他们的逻辑，不得不调整我的和他们的，以使其有效，
• 性能至关重要，此解决方案意味着更多的绘图速度为24fps，
• 每次更新lib时我都会挣扎......

总而言之，远离干扰lib似乎更好。有没有办法选择重叠画布的表现方式？

提前致谢！

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

Answer 1

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

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

标准画布合成无法提供帮助，因为没有合并源目标像素的混合模式。

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

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

将蓝色高亮画布放在非透明字母画布后面会给您带来最佳性能。

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