为绘图笔划设置blendmode？

Question

我看了一下,认为我的问题的答案是"不",但这里有:

使用Javascript和canvas标签,我可以绘制很好的alpha混合线条stroke().

这很有趣,但我想通过设置笔触的blendmode来更进一步.
例如,它看起来像是使用经典的src*(alpha)+ dst*(1 - alpha),我想要像src + dst这样的东西,以便得到加法混合.

这个页面:http://www.andersriggelsen.dk/OpenGL似乎是逐像素混合,我真的很想避免.

Answer 1

HTML5 Canvas上下文本身支持的唯一"混合模式"是全局复合操作:

• source-atop
• source-in
• source-out
• source-over
• destination-atop
• destination-in
• destination-out
• destination-over
• lighter
• darker (不再在规范中)
• xor
• copy

请参阅此链接以获取模式的优秀动画交互示例.但是,您想要的添加/屏幕模式不在其中.

如果这个功能对你很重要,我已经编写了免费的上下文混合器库,使用Photoshop风格的混合模式将两个画布(或其区域)混合在一起.正如你所说,这个(必要)的内部执行逐像素操作.它不像原生合成模式那么快,但它也不慢.它仍然允许您在一个(通常是屏幕外)画布上执行原生笔触和填充操作,然后将屏幕外画布复合到另一个画布上.

是的,上下文混合器支持"屏幕"和"添加"混合模式.:)