HTML5 画布混合模式

Question

我是 HTML5 画布的新手，我想在 ActionScript 3 中重现 BlendMode.ADD 的结果。

根据文档，BlendMode.ADD 的作用如下：

将显示对象的原色值添加到 其背景的颜色，应用 0xFF 的上限。这个设置是 通常用于动画两个对象之间的闪电溶解。

例如，如果显示对象有一个像素，其 RGB 值为 0xAAA633，背景像素的 RGB 值为 0xDD2200，则 结果显示像素的 RGB 值为 0xFFC833（因为 0xAA + 0xDD > 0xFF、0xA6 + 0x22 = 0xC8 和 0x33 + 0x00 = 0x33)。

来源：http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BlendMode.html#ADD

如何对 HTML5 Canvas 中的图像执行相同的操作？

Answer 1

2D 画布的specification 实现了名为“lighter”的混合模式（不要与 “lighten” 混淆，后者是不同的模式) 将执行“添加”。

var ctx = c.getContext("2d");
ctx.fillStyle = "#037";
ctx.fillRect(0, 0, 130, 130);

ctx.globalCompositeOperation = "lighter";  // AKA add / linear-dodge
ctx.fillStyle = "#777";
ctx.fillRect(90, 20, 130, 130);

<canvas id=c></canvas>

（更新：我记得（错误地）lighten 作为它的名称，很抱歉原始版本的答案中额外的手动步骤）。