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

Posted 2023-02-22

【中文标题】为绘制笔画设置混合模式？

【英文标题】：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 似乎正在逐像素混合， 我真的很想避免。

【参考方案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”，看看它是否足够接近我所追求的。 .. 甜的 ！很近 ！我也会看看你的搅拌机库。这可能是两者的结合可以同时获得速度和足够的准确性供我使用。再次感谢。

令人难以置信的是画布没有添加混合模式。所有混合模式中最简单的实现，拥有如此重要！

“打火机”是附加的。这只是一个非常糟糕的名字。