javascript - HTML5 Canvas 混合模式

Question

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

根据文档，这是 BlendMode.ADD 的作用:

Adds the values of the constituent colors of the display object to the colors of its background, applying a ceiling of 0xFF. This setting is commonly used for animating a lightening dissolve between two objects.

For example, if the display object has a pixel with an RGB value of 0xAAA633, and the background pixel has an RGB value of 0xDD2200, the resulting RGB value for the displayed pixel is 0xFFC833 (because 0xAA + 0xDD > 0xFF, 0xA6 + 0x22 = 0xC8, and 0x33 + 0x00 = 0x33).

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

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

Answer 1

specification的 2D Canvas 实现了名为“lighter”的混合模式(不要与 “lighten” 混淆，后者是不同的模式)，它将执行“add” .

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 作为它的名称，对于原始版本答案中额外的手动步骤感到抱歉)。