为绘图笔划设置blendmode?

时间:2011-02-08 22:52:33

标签: javascript html5 canvas blend

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

使用Javascript和canvas标签,我可以使用stroke()绘制精美的alpha混合线。

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

此页面:http://www.andersriggelsen.dk/OpenGL似乎在逐个像素地进行混合, 我真的很想避免。

1 个答案:

答案 0 :(得分:6)

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风格的混合模式将两个画布(或其区域)混合在一起。正如你所说,这个(必要)的内部执行逐像素操作。它不像原生合成模式那么快,但它也不慢。它仍然允许您在一个(通常是屏幕外)画布上执行原生笔触和填充操作,然后将屏幕外画布复合到另一个画布上。

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