HTML5 Canvas blendmode

Question

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

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

  

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

     

例如，如果显示对象具有RGB值为的像素   0xAAA633，背景像素的RGB值为0xDD2200，   显示像素的RGB值为0xFFC833（因为0xAA   + 0xDD＆gt; 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实现了混合模式，名称为“更轻”（不要与“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>

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