设置绘图笔画的blendmode？ [英] Set blendmode for drawing strokes?

问题描述

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

I've looked a bit and think the answer to my question is "no", but here goes:

使用Javascript和canvas标签，我可以绘制与 stroke（）很好地混合线。

With Javascript and a canvas tag, I can draw nicely alpha-blended lines with stroke().

这是很有趣的，但我想

例如，它看起来像是使用经典的src *（alpha）+ dst *（1 - alpha），
和i'

This is loads of fun, but I'd like to take it one step further by setting the blendmode for the stroke.
e.g., it looks like it's using the classic src * (alpha) + dst * (1 - alpha), and i'd like something like just src + dst, in order to get additive blending.

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

This page: http://www.andersriggelsen.dk/OpenGL seems to be doing blending pixel-by-pixel, which I'd really like to avoid.

推荐答案

HTML5 Canvas上下文支持的唯一混合模式是全球复合操作：

The only "blend modes" supported natively by HTML5 Canvas context are the Global Composite Operations:

• 源头


• 源码


• source-out


• li> destination-atop


• destination-in


• destination-out


• / li>

• 更亮


• c> （不再在规范中）


• xor


• copy

• source-atop
• source-in
• source-out
• source-over
• destination-atop
• destination-in
• destination-out
• destination-over
• lighter
• darker (no longer in the spec)
• xor
• copy

请参阅此链接是一个优秀的动画交互示例的模式。

See this link for an excellent animated interactive example of the modes. The add/screen mode that you want, however, is not among them.

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

If this functionality is important to you, I have written the free context-blender library to blend two canvases (or regions thereof) together using Photoshop-style blend modes. As you say, the internals of this (necessarily) perform pixel-by-pixel operations. It's not nearly as fast as a native compositing mode, but it's not slow, either. It still lets you perform native stroke and fill operations on one (typically offscreen) canvas, and then composite the offscreen canvas onto another.

搅拌机支持屏幕和添加混合模式。 ：）

And yes, context-blender supports both 'screen' and 'add' blend modes. :)

这篇关于设置绘图笔画的blendmode？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！