为绘制笔画设置混合模式？答案

【问题标题】：Set blendmode for drawing strokes?为绘制笔画设置混合模式？
【发布时间】：2011-02-08 22:52:33
【问题描述】：

我看了一点，认为我的问题的答案是“不”，但这里是：

使用 Javascript 和 canvas 标签，我可以用stroke() 绘制漂亮的 alpha 混合线条。

这很有趣，但我想更进一步，为笔画设置混合模式。
例如，它看起来像是在使用经典的 src * (alpha) + dst * (1 - alpha)，我想要像 src + dst 这样的东西，以获得添加剂混合。

此页面：http://www.andersriggelsen.dk/OpenGL 似乎正在逐像素混合，我真的很想避免。

【问题讨论】：

标签： javascript html canvas blend

【解决方案1】：

HTML5 Canvas 上下文本机支持的唯一“混合模式”是Global Composite Operations：

source-atop
source-in
source-out
source-over
destination-atop
destination-in
destination-out
destination-over
lighter
~~darker~~ （不再在规范中）
xor
copy

请参阅this link，了解这些模式的出色动画交互示例。但是，您想要的添加/屏幕模式不在其中。

如果此功能对您很重要，我已编写 free context-blender library 以使用 Photoshop 风格的混合模式将两个画布（或其区域）混合在一起。正如您所说，它的内部（必然）执行逐像素操作。它没有原生合成模式那么快，但也不慢。它仍然允许您在一个（通常是屏幕外）画布上执行原生笔触和填充操作，然后将屏幕外画布合成到另一个画布上。

是的，上下文混合器支持“屏幕”和“添加”混合模式。 :)

【讨论】：

你是对的 - 提供的操作并没有真正给出“添加”，尽管我可能会调查“Lighter”，看看它是否足够接近我所追求的。 .. 甜的！很近！我也会看看你的搅拌机库。这可能是两者的结合可以同时获得速度和足够的准确性供我使用。再次感谢。
令人难以置信的是画布没有添加混合模式。所有混合模式中最简单的实现，拥有如此重要！
“打火机”是附加的。这只是一个非常糟糕的名字。