设置混合模式来绘制笔划?
我看了一点,认为我的问题的答案是“否”,但这里是:
使用 Javascript 和 canvas 标签,我可以使用 lines()
绘制漂亮的 alpha 混合线。
这很有趣,但我想通过设置笔画的混合模式来更进一步。
例如,它看起来像使用经典的 src * (alpha) + dst * (1 - alpha), 我想要像 src + dst 这样的东西,以获得附加混合。
此页面: http://www.andersriggelsen.dk/OpenGL 似乎正在逐像素混合-像素, 我真的很想避免。
I've looked a bit and think the answer to my question is "no", but here goes:
With Javascript and a canvas tag, I can draw nicely alpha-blended lines with stroke()
.
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.
This page: http://www.andersriggelsen.dk/OpenGL seems to be doing blending pixel-by-pixel,
which I'd really like to avoid.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
HTML5 Canvas 上下文本身支持的唯一“混合模式”是全局组合操作 :
源-atop
源-in
源-out
源-over
目标-atop
目的地输入
目的地输出
目的地结束
较亮
(不再在规范中)较暗
xor
copy
请参阅此链接提供了模式的优秀动画交互示例。然而,您想要的添加/屏幕模式并不在其中。
如果此功能对您很重要,我已经编写了免费上下文混合器库来混合两个画布(或其区域)使用 Photoshop 风格的混合模式一起。正如您所说,其内部(必然)执行逐像素操作。它不像原生合成模式那么快,但也不慢。它仍然允许您在一个(通常是屏幕外)画布上执行本机描边和填充操作,然后将屏幕外画布合成到另一画布上。
是的,context-blender 支持“屏幕”和“添加”混合模式。 :)
The only "blend modes" supported natively by HTML5 Canvas context are the Global Composite Operations:
source-atop
source-in
source-out
source-over
destination-atop
destination-in
destination-out
destination-over
lighter
(no longer in the spec)darker
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.
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. :)