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 中对一张图片进行相同的操作？

- JeePing

Answer 1

2D画布规范实现了名为"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 不是它的名字，对于原版答案中多余的手动步骤感到抱歉。）

- user1693593