javascript - Canvas - 多重合成操作

Question

是否可以在绘制不同“事物”时使用多重合成？

例如，我想对特定类型的 fillRect 使用打火机，但对于其余部分，我想保持一切照常。

Answer 1

当然，合成模式可以在每次绘制之前即时更改，因此您可以将某些绘制操作更改为“打火机”，对其他操作更改为“源代码”。

请注意，某些合成模式可能会清除已绘制的内容，因此请明智地选择。

ctx.globalCompositeOperation = "lighter";      // lighter mode (blend mode)
ctx.fillRect(x, y, w, h);

ctx.globalCompositeOperation = "source-over";  // normal mode (comp mode)
ctx.fillRect(x, y, w, h);