0

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

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

这是我所拥有的：
https://www.dropbox.com/s/zw0h9yjxsk4z7ug/whatIHave.png

这就是我想要的：
https://www.dropbox.com/s/r3nrb9lxx03xbjh/whatIWant.png

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

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

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

提前致谢！

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

4

1 回答 1

0

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

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

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

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

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

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

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

于 2014-04-23T14:05:15.760 回答